JSFiddle - React, Tailwind, and code Playground

by felvhage

HTML

<a href="http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back">http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back</a>
<div>Erikallens Method: </div><div><input id="editable1" type="text" class="test" /></div><div class="test">sluggishness:</div><div id="avg1" class="test"></div><div class="test">&nbsp;ms / 10.000 Calls</div><br><br>
<div>CodeNepals Method: </div><div><input id="editable2" type="text" class="test" /></div><div class="test">sluggishness:</div><div id="avg2" class="test"></div><div class="test">&nbsp;ms / 10.000 Calls</div><br><br>
<div>Robin Mabens Method: </div><div><input id="editable3" type="text" class="test" /></div><div class="test">sluggishness:</div><div id="avg3" class="test"></div><div class="test">&nbsp;ms / 10.000 Calls</div><br><br>
<div>Stas Method: </div><div><input id="editable4" type="text" class="test" /></div><div class="test">sluggishness:</div><div id="avg4" class="test"></div><div class="test">&nbsp;ms / 10.000 Calls</div><br><br>
<div>Darwaynes Method: </div><div><input id="editable5" type="text" class="test" /></div>
<div class="test">sluggishness:</div><div id="avg5" class="test"></div><div class="test">&nbsp;ms / 10.000 Calls</div><br><br>

CSS

.test{
    float: left;
}

JavaScript

var erikallensMethod = function(e){
   var doPrevent = false;
    if (event.keyCode === 8) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && (d.type.toUpperCase() === 'TEXT' || d.type.toUpperCase() === 'PASSWORD' || d.type.toUpperCase() === 'FILE')) 
             || d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {
            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }  
};
var darwaynesMethod = function(e){
	var $target = $(e.target||e.srcElement);
	  if(e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea'))
	  {
	    e.preventDefault();
	  }
};
var rx = /INPUT|TEXTAREA/i;
var rxT = /RADIO|CHECKBOX|SUBMIT/i;
var codenepalsMethod = function(e){
        var preventKeyPress;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            if (rx.test(e.target.tagName)) {
                var preventPressBasedOnType = false;
                if (d.attributes["type"]) {
                    preventPressBasedOnType = rxT.test(d.attributes["type"].value);
                }
                preventKeyPress = d.readOnly || d.disabled || preventPressBasedOnType;
            } else {preventKeyPress = true;}
        } else { preventKeyPress = false; }

        if (preventKeyPress) e.preventDefault();
};

var robinMabenMethod = function(e){
  var key = e == null ? event.keyCode : e.keyCode;
    if(key == 8 && $(document.activeElement.is(':not(:input)')))   //select, textarea
      e.preventDefault(); 
};

var stasMethod = function(e){
     var event = event || window.event;
  if (event.keyCode == 8) {
    var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
    var d = event.srcElement || event.target;
    var regex = new RegExp(d.tagName.toUpperCase());
    if (regex.test(elements)) {
      event.preventDefault ? event.preventDefault() : event.returnValue = false;
...