JS disabled browser backspace key implementation ideas and code

  • 2020-03-26 21:41:15
  • OfStack

Last week submitted a project (internal use), a colleague put forward a BUG, say to want to disable the backspace key (backspace or call back key), because this, unlike his habit, worry about half one thousand language school, he press the backspace button, then the content of a page filled in white, then swear that he made the back button is not used in the system, I have a problem, the system at the time because things more, only record the problem, then checked he used to do the project, also does not have to deal with the backspace key. Oneself project all did not deal with, come to my this shout come, calculate, with the young person general knowledge. Disable the back button, easy.

In fact, disable is not completely disabled, the back button in each browser is the default click on the back button, as long as the guarantee of normal text input can also be used, under other circumstances backspace key will be banned. Look at the code.

When the keyboard hits the Backspace key
1, the browser is not allowed to automatically back
2, but does not affect the password, single-line text, multi-line text input box, etc

Solutions:

A search on the Internet revealed a number of solutions, but zywang's was better

On the basis of it, it is supplemented and improved to meet the requirements. The sorted code is as follows:
Code 1. Core code


function forbidBackSpace(e) { 
var ev = e || window.event; //Get the event object
var obj = ev.target || ev.srcElement; //Get the event source
var t = obj.type || obj.getAttribute('type'); //Gets the event source type
//Gets the type of event used as a judgment condition
var vReadOnly = obj.readOnly; 
var vDisabled = obj.disabled; 
//Handle the undefined case
vReadOnly = (vReadOnly == undefined) ? false : vReadOnly; 
vDisabled = (vDisabled == undefined) ? true : vDisabled; 
//When the Backspace key is struck, the event source type is password or single-line, multi-line text,
//And if the readOnly property is true or the disabled property is true, the backspace key is invalid
var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true); 
//When the Backspace key is struck, the Backspace key is invalidated if the event source type is not password or if it is single-line, multi-line text
var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea"; 
// judge  
if (flag2 || flag1) return false; 
} 
//Disable the back button for Firefox and Opera
// document.onkeypress = forbidBackSpace; 
//Disable the back button for IE and Chrome
document.onkeydown = forbidBackSpace; 

Code 2,


 function bindBackEvent() { //Prevent backspace keys
 	$(document).keydown(function(e){
 		e = window.event || e;
	 	var code = e.keyCode || e.which;
	 	if (code == 8) {
	 		var src = e.srcElement || e.target;
	 		var tag = src.tagName;
	 		if (tag != "INPUT" && tag != "TEXTAREA") {
	 			e.returnValue = false; 
	 			return false;
	 		} else if ((tag == "INPUT" || tag == "TEXTAREA") && src.readOnly == true) {
	 			e.returnValue = false;
	 			return false; 
	 		}
	 	}
 	});
 }



Related articles: