Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: open

Message Too Old, No Replies

Disable backspace key sample code

How to disable the backspace key as back button

     
1:00 am on Nov 14, 2008 (gmt 0)

New User

5+ Year Member

joined:Nov 14, 2008
posts:1
votes: 0


I want to share a javascript to disable the backspace key with you.
As you know, when the mouse cursor fouse on a non-input field such as white space, radio button,
button and you press the backspace key, the page will go back to previous page.
The script is disable this feature but the backspace key still works when mouse cursor focus in a input text field.
It works in IE7 and Firefox3.0.


<script language="JavaScript1.2">

// Every single key press action will call this function.
function shouldCancelBackspace(e) {
var key;
if(e){
key = e.which? e.which : e.keyCode;
if(key == null ¦¦ ( key != 8 && key != 13)){ // return when the key is not backspace key.
return false;
}
}else{
return false;
}

if (e.srcElement) { // in IE
tag = e.srcElement.tagName.toUpperCase();
type = e.srcElement.type;
readOnly =e.srcElement.readOnly;
if( type == null){ // Type is null means the mouse focus on a non-form field. Disable backspace button
return true;
}else{
type = e.srcElement.type.toUpperCase();
}

} else { // in FF
tag = e.target.nodeName.toUpperCase();
type = (e.target.type) ? e.target.type.toUpperCase() : "";
}

// we don't want to cancel the keypress (ever) if we are in an input/text area
if ( tag == 'INPUT' ¦¦ type == 'TEXT' ¦¦type == 'TEXTAREA') {
if(readOnly == true ) // if the field has been dsabled, disbale the back space button
return true;
if( ((tag == 'INPUT' && type == 'RADIO') ¦¦ (tag == 'INPUT' && type == 'CHECKBOX'))
&& (key == 8 ¦¦ key == 13) ){
return true; // the mouse is on the radio button/checkbox, disbale the backspace button
}
return false;
}

// if we are not in one of the above things, then we want to cancel (true) if backspace
return (key == 8 ¦¦ key == 13);
}

// check the browser type
function whichBrs() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';

if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));
}else
return 'Netscape';
}else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else
return navigator.userAgent;
}

// Global events (every key press)

var browser = whichBrs();
if(browser == 'Internet Explorer'){
document.onkeydown = function() { return !shouldCancelBackspace(event); }
}else if(browser == 'Firefox'){
document.onkeypress = function(e) { return !shouldCancelBackspace(e); }
}

</script>

3:16 am on Nov 14, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Or replace

// check the browser type
function whichBrs() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';

if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));
}else
return 'Netscape';
}else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else
return navigator.userAgent;
}

// Global events (every key press)

var browser = whichBrs();
if(browser == 'Internet Explorer'){
document.onkeydown = function() { return !shouldCancelBackspace(event); }
}else if(browser == 'Firefox'){
document.onkeypress = function(e) { return !shouldCancelBackspace(e); }
}

with

if(window.event){
document.onkeydown = function() { return !shouldCancelBackspace(event); }
}else {
document.onkeypress = function(e) { return !shouldCancelBackspace(e); }
}

To support more browsers

3:25 am on Nov 14, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


I would generally advise AGAINST removing browser default behaviors. Many people use the keyboard to navigate, and some require it, so removing functionality that is built in to the browser is bad for accessibility.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members