JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31
  • Score
    100M100P100Q68525F
  • License MIT

Svelte component and action to focus an element when pressing a key

Package Exports

  • svelte-focus-key
  • svelte-focus-key/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-focus-key) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-focus-key

NPM

Svelte component and action to focus an element when pressing a key

The primary use case is to focus a search input when pressing the forward slash key ("/").

Installation

Yarn

yarn add -D svelte-focus-key

NPM

npm i -D svelte-focus-key

pnpm

pnpm i -D svelte-focus-key

Usage

FocusKey component

Use the bind:this directive to pass the element to focus to the FocusKey component.

<script>
  import FocusKey from "svelte-focus-key";

  let element;
</script>

<input bind:this={element} placeholder={'Press "/" to focus'} />

<FocusKey {element} />

Custom focus key

The default focus key is the forward slash (/). Customize the key using the key prop.

<script>
  import FocusKey from "svelte-focus-key";

  let textarea;
</script>

<textarea bind:this={textarea} placeholder={'Press "s" to focus'} />

<FocusKey element={textarea} key="s" />

Select text on focus

Set selectText to true to select the text in the element when focusing.

<script>
  import FocusKey from "svelte-focus-key";

  let input;
</script>

<input
  bind:this={input}
  value={'Press "e" to focus'}
  placeholder={'Press "e" to focus'}
/>

<FocusKey element={input} key="e" selectText />

focusKey action

This utility is also available as a Svelte action.

<script>
  import { focusKey } from "svelte-focus-key";
</script>

<input use:focusKey={{ key: "k" }} placeholder={'Press "k" to focus'} />

API

Props

Name Description Type Default value
element HTML element to focus HTMLElement null
key Key to trigger focus when pressed string "/"
selectText Select element text when focusing boolean false

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

CHANGELOG.md

License

MIT