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...
	},

	'$mod+k s'() {
		// pressed $mod+k, then s...
	},

	'g g'() {
		// pressed g twice...
	},
});

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...
	},
});

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