How can I prevent Backspace from navigating back in javascript?
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.keyCo开发者_运维问答de == 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>
Using 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.
加载中,请稍侯......
精彩评论