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?

score 0 · Answer 1 · answered Apr 10 '12 at 08:04

0

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.

answered Apr 10 '12 at 08:04

kirilloid

14,011
6
38
52

kirilloid, I need it to be cross-browser compatible so I can not use this option. Thank you for your response. – Shane Apr 10 '12 at 10:04
In Firefox you can prevent default browser behaviour in either `keydown` or `keypress`. It's all here: http://unixpapa.com/js/key.html – Tim Down Apr 26 '12 at 09:09

score 0 · Answer 2 · answered Apr 25 '12 at 06:20

0

Use a keydown handler on the document level:

document.onkeydown = function(e){
 if (e.keyCode===8) {
   return false;
 }
};

answered Apr 25 '12 at 06:20

KooiInc

119,216
31
141
177

Kamyar Nazeri · Accepted Answer · 2012-04-27T06:40:08.143

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!

I do not want to disable it - I want to stop it from sending the page back, however fo my use completely disabling it will not be an issue as I have no such generic text input fields. Also, I have asked for DOM level 3 listeners (ie. addEvent/attach listeners), is that not an option? — Shane, Apr 26 '12 at 15:12
DOM3 comes the *backward compatibility* with DOM2 event model, so the snippet above should work perfectly in any browser compatible with DOM2/3 event model, however I did update the post for solely DOM3 model — Kamyar Nazeri, Apr 27 '12 at 06:42
@Shane: if this is the answer to your question, mark it as answered — Kamyar Nazeri, May 15 '12 at 03:06

Disable backspace with DOM Level 3 Listeners

3 Answers3