From b6cde34a087ab19651c9157154ca8e195cef5cdd Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Tue, 13 Mar 2018 10:32:15 +0200 Subject: [PATCH] Automatically focus input when typing into nothing --- client/js/keybinds.js | 65 +++++++++++++++++++++++++++++++++++++- client/js/renderPreview.js | 3 -- 2 files changed, 64 insertions(+), 4 deletions(-) diff --git a/client/js/keybinds.js b/client/js/keybinds.js index 1ed82db8..0080d08b 100644 --- a/client/js/keybinds.js +++ b/client/js/keybinds.js @@ -108,7 +108,7 @@ const colorsHotkeys = { for (const hotkey in colorsHotkeys) { Mousetrap.bind("mod+" + hotkey, function(e) { // Do not handle modifier hotkeys if input is not focused - if (document.activeElement !== input[0]) { + if (document.activeElement !== input) { return; } @@ -119,3 +119,66 @@ for (const hotkey in colorsHotkeys) { wrapCursor(input, modifier, input.selectionStart === input.selectionEnd ? "" : modifier); }); } + +// Ignored keys which should not automatically focus the input bar +const ignoredKeys = { + 8: true, // Backspace + 9: true, // Tab + 12: true, // Clear + 16: true, // Shift + 17: true, // Control + 18: true, // Alt + 19: true, // Pause + 20: true, // CapsLock + 27: true, // Escape + 33: true, // PageUp + 34: true, // PageDown + 35: true, // End + 36: true, // Home + 37: true, // ArrowLeft + 38: true, // ArrowUp + 39: true, // ArrowRight + 40: true, // ArrowDown + 45: true, // Insert + 46: true, // Delete + 112: true, // F1 + 113: true, // F2 + 114: true, // F3 + 115: true, // F4 + 116: true, // F5 + 117: true, // F6 + 118: true, // F7 + 119: true, // F8 + 120: true, // F9 + 121: true, // F10 + 122: true, // F11 + 123: true, // F12 + 144: true, // NumLock + 145: true, // ScrollLock + 224: true, // Meta +}; + +if (!("ontouchstart" in window || navigator.maxTouchPoints > 0)) { + $(document.body).on("keydown", (e) => { + // Ignore if target isn't body (e.g. focused into input) + // Ignore any key that uses alt modifier + // Ignore keys defined above + if (e.target !== document.body || e.altKey || ignoredKeys[e.which]) { + return; + } + + // Ignore all ctrl keys except for ctrl+v to allow pasting + if ((e.ctrlKey || e.metaKey) && e.which !== 86) { + return; + } + + // On enter, focus the input but do not propagate the event + // This way, a new line is not inserted + if (e.which === 13) { + input.trigger("focus"); + return false; + } + + input.trigger("focus"); + }); +} diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js index faccf26e..c7474d52 100644 --- a/client/js/renderPreview.js +++ b/client/js/renderPreview.js @@ -5,7 +5,6 @@ const options = require("./options"); const socket = require("./socket"); const templates = require("../views"); const chat = $("#chat"); -const input = $("#input"); const Mousetrap = require("mousetrap"); module.exports = renderPreview; @@ -207,8 +206,6 @@ function closeImageViewer({pushState = true} = {}) { imageViewer.empty(); }); - input.trigger("focus"); - // History management if (pushState) { const clickTarget =