keybinds#

JSR | source code

handles keyboard shortcuts sensibly.

use this web page to get the right keybinds for use here.

const handler = createKeybindHandler({
	'$mod+K'() {
		// open search modal...
	},

	s() {
		// save...
	},
});

window.addEventListener('keydown', handler);

"sensible" keyboard handling#

the library reserves certain keybinds for the following scenarios:

• <input type=text>, <textarea> and <div contenteditable>
  • text insertion (a, s, ...)
  • uppercase text insertion (Shift+A, Shift+S, ...)
  • text deletion (Backspace, $mod+Backspace)
  • cursor per-char positioning (ArrowLeft, ArrowRight, ...)
  • cursor per-char selection (Shift+ArrowLeft, Shift+ArrowRight, ...)
  • cursor per-word positioning ($mod+ArrowLeft, $mod+ArrowRight, ...)
  • cursor per-word selection ($mod+Shift+ArrowLeft, $mod+Shift+ArrowRight, ...)
  • common text manipulation shortcuts ($mod+a, $mod+v, ...)
  • multiline only: new line insertion (Enter)
  • date/time inputs only: open picker UI (Enter)
• <input type=checkbox>
  • tick/unticking check (Space)
• <input type=radio> and <input type=range>
  • selection (ArrowLeft, ArrowRight)
• <button> and <input type=file>
  • action trigger (Space, Enter)
• <a href>
  • link navigation (Enter, $mod+Enter, ...)
• <select>
  • jump to value (a, s, ...)

prefix a keybind with ! to opt out of all of the above.

const handler = createKeybindHandler({
	'!ArrowDown'() {
		// Runs even inside a text field, for a combobox listbox...
	},
});

createKeybindHandler will call .preventDefault() on matching events by default, you can disable this by passing false as the second parameter. events that another handler has already called .preventDefault() on are skipped either way.

I'd recommend writing your own handler if you need more flexibility, all the relevant functions are exported.