This works in IE, but I cannot get it to work in Opera or Firefox. I want to prevent Backspace from navigating away if and only if the current focus is the SELECT dropdown.
<html>
<body>
<select id="testselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script language="javascript">
document.getElementById("testselect").onkeydown = function(e) {
if(!e) {
e = event;
}
alert(e.keyCode);
if (e.keyCode == 8 || e.keyCode == 46) {
e.returnValue = false;
e.cancelBubble = true;
if (e.stopPropagation) { e.stopPropagation(); alert("stoppropagation");}
if (e.preventDefault) { e.preventDefault(); alert("preventdefault");}
return false;
}
};
</script>
</body>
</html>
This works in IE, but I cannot get it to work in Opera or Firefox. I want to prevent Backspace from navigating away if and only if the current focus is the SELECT dropdown.
<html>
<body>
<select id="testselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script language="javascript">
document.getElementById("testselect").onkeydown = function(e) {
if(!e) {
e = event;
}
alert(e.keyCode);
if (e.keyCode == 8 || e.keyCode == 46) {
e.returnValue = false;
e.cancelBubble = true;
if (e.stopPropagation) { e.stopPropagation(); alert("stoppropagation");}
if (e.preventDefault) { e.preventDefault(); alert("preventdefault");}
return false;
}
};
</script>
</body>
</html>
- 1 +1 for helping me realize that "backspace navigating" works on keydown and not keyup. I always thought I had to hit it once per page I wanted to go back, but now I realize I could just hold it down. – Mercurybullet Commented Nov 20, 2009 at 21:03
- Oh, I installed firebug and now this sample works in firefox. No idea why. – hova Commented Nov 20, 2009 at 22:36
4 Answers
Reset to default 9Using jquery - for only select dropdown
$(document).ready(function(){
//for IE use keydown, for Mozilla keypress
//as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
$('select').keypress(function(event){if (event.keyCode == 8) {return false;}});
$('select').keydown(function(event){if (event.keyCode == 8) {return false;}});
}
For all elements in page except input controls and textarea is as follows
<script type="text/javascript">
//set this variable according to the need within the page
var BACKSPACE_NAV_DISABLED = true;
function fnPreventBackspace(event){if (BACKSPACE_NAV_DISABLED && event.keyCode == 8) {return false;}}
function fnPreventBackspacePropagation(event){if(BACKSPACE_NAV_DISABLED && event.keyCode == 8){event.stopPropagation();}return true;}
$(document).ready(function(){
if(BACKSPACE_NAV_DISABLED){
//for IE use keydown, for Mozilla keypress
//as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
$(document).keypress(fnPreventBackspace);
$(document).keydown(fnPreventBackspace);
//Allow Backspace is the following controls
$('input').keypress(fnPreventBackspacePropagation);
$('input').keydown(fnPreventBackspacePropagation);
$('textarea').keypress(fnPreventBackspacePropagation);
$('textarea').keydown(fnPreventBackspacePropagation);
}
});
</script>
That's trickier than I would have thought. Depending on the reason you are preventing the user from backspacing away from the page, something like this might work for you:
<script type="text/javascript">
var bShowWarning = false;
document.getElementById("testselect").onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 8 || e.keyCode == 46) {
bShowWarning = true;
}
};
function UnLoadWindow() {
if (!bShowWarning) return;
return 'If you leave the page your data will be lost.';
}
window.onbeforeunload = UnLoadWindow;
</script>
Well, turns out that Opera needs the event to be cancelled in the onkeypress event, not onkeydown.
Reference: http://jimblackler.net/blog/?p=20
You might want to check out the source code for the project from this article. He goes into detail about how he had to contend with the backspace key in different browsers.