JSFiddle - React, Tailwind, and code Playground
HTML
open dev tools to see message "preventing backspace navigation" whenever we would otherwise trigger a back navigation
<br/>
<label>textarea: <textarea>example text area</textarea></label>
<br/>
<label>text: <input type="text" value="try to backspace inside"/></label></label>
<br/>
<label>textarea: <textarea disabled="disabled">disabled text area</textarea></label>
<br/>
<label>text: <input type="text" value="disabled text input" disabled="disabled"/></label></label>
<br/>
<label>textarea: <textarea readonly="readonly">read-only text area</textarea></label>
<br/>
<label>text: <input type="text" readonly="readonly" value="read-only text input"/></label></label>
<br/>
<label>password: <input type="password" value="abcdefg"/></label>
<br/>
<label>file: <input type="file"/></label>
<br/>
<label>email: <input type="email" value="[email protected]"/></label>
<br/>
<label>search: <input type="search" value="try to backspace inside"/></label>
<br/>
<label>date: <input type="date"/></label>
<br/>
<label>number: <input type="number" value="123456"/></label>
<br/>
<input type="button" value="Test"/> (tab to activate me)
<br/>
<a href="asdf">test link</a> (tab to activate me)
JavaScript
var _INPUTTYPE_WHITELIST = ['text', 'password', 'search', 'email', 'number', 'date'];
function backspaceWouldBeOkay(elem) {
var isFrozen = elem.readOnly || elem.disabled;
if (isFrozen) // a frozen field has no default which would shadow the shitty one
return false;
else {
var tagName = elem.tagName.toLowerCase();
if (elem instanceof HTMLTextAreaElement)
return true;
if (tagName=='input') {
var inputType = elem.type.toLowerCase();
if (_INPUTTYPE_WHITELIST.includes(inputType))
return true;
}
return false;
}
}
document.body.addEventListener('keydown', ev => {
if (ev.keyCode==8 && !backspaceWouldBeOkay(ev.target)) {
console.log('preventing backspace navigation');
ev.preventDefault();
}
}, true); // end of event bubble phase