Automatically focus input when typing into nothing

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");
+	});
+}

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 =