Disable backspace with DOM Level 3 Listeners
Question
I am making a page in which a user must be able to type. The default function of backspace is to go back a page, however I need to prevent this and assign my own function to it.
The problem is actually preventing backspace. I can capture it however I can not prevent it. I am using Level 3 event listeners. event.preventDefault() did not work for me and neither did return false.
I have tried this also:
function onunload(e) {
if (e.keyCode == 37) return false;
return true;
}
and
<body onunload="return false;">
However the first basically does
return confirm("false");
and the second does nothing?
3 answers
solution1
0 2012-04-10 08:04:29
AFAIR, one may prevent default browser shortcut actions by returning false in keypress in Firefox only (and last version I tested, was 3.x).
beforeunload and unload are specific events and string should be returned in their handlers. For security reasons, browser may only display a confirmation dialog with message provided (that string). Moreover, Firefox since version 4 even ignores that string and always displays standard message.
There's no way to silently prevent user from leaving page.
BTW backspace don't work as history.back() in Ubuntu.
solution2
0 2012-04-25 06:20:58
Use a keydown handler on the document level:
document.onkeydown = function(e){
if (e.keyCode===8) {
return false;
}
};
solution3
0 ACCPTED 2012-04-25 17:03:58
Preventing backspace key altogether might not be a good idea, assume you make a typo and want to fix it in a text box! So you need to disable backspace only if someone is not typing in a text input!
This might work in all major browsers:
document.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode == 8) { // Disable Backspace
var el = document.activeElement;
if (!((el.nodeName == "INPUT" && (el.type == "text" || el.type == "password")) || el.nodeName == "TEXTAREA")) {
e.preventDefault();
e.stopPropagation();
return false;
}
}
};
DOM3 event model spec comes with backward compatibility so I don't think this might be an issue, however this is the DOM3 modified version of the above code:
function KeyDownHandler(e) {
if (e.keyCode == 8) { // Disable Backspace
var el = document.activeElement;
if (!((el.nodeName == "INPUT" && (el.type == "text" || el.type == "password")) || el.nodeName == "TEXTAREA")) {
e.preventDefault();
e.stopPropagation();
}
}
};
if (document.attachEvent) document.attachEvent("onkeydown", KeyDownHandler);
else document.addEventListener("keydown", KeyDownHandler);
A DOM3 event registration like the one above might be a great pain, John Resig has a good implementation on this, you could however use a standard cross browser library like JQuery which works fine in all major browsers!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.