JSFiddle - React, Tailwind, and code Playground

Backspace catcher, to stop backspace making browser go back a page

by Ben Clayton

HTML

<div>
    NON EDITABLE
<div data-field="body" contenteditable='true'>
    EDITABLE HELLO
<div>
<div>
    EDITABLE WORLD
</div>
</div>
</div>
</div>

<input value='EDITABLE FRED SMITH'/><br>
<input disabled='true' value='NON EDITABLE FRED SMITH'/>
<br><br><br><br><br>
THE END

CSS

div   {
    border:2px solid red;
    padding:10px
}
input {width:250px;}

JavaScript

$(document).unbind('keydown').bind('keydown', function (event) {
				//debugger;
				if (event.keyCode === 8) {
					var d = event.srcElement || event.target;
					if( $(d).data('field') ) return;
                    if ((
                        d.tagName.toUpperCase() === 'INPUT' 
                        && (
                            d.type.toUpperCase() === 'TEXT' 
                            || d.type.toUpperCase() === 'PASSWORD' 
                            || d.type.toUpperCase() === 'FILE')) 
                        || d.tagName.toUpperCase() === 'TEXTAREA')
                    { // allow backspace for all these input types , unless they are disabled or readonly
                        if(!d.readOnly && !d.disabled) return;
                    }
					event.preventDefault();// stop backspace key functioning 
				}
			});