在IE上,我可以用jQuery(非常不标准,但工作)做到这一点
if ($.browser.msie)
$(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});
但是是否有可能在Firefox上运行,或者在跨浏览器上获得额外的好处呢?
郑重声明:
$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });
什么也不做。
$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });
解决了问题,但使退格键在页面上无法使用,这比原来的行为更糟糕。
编辑:
我这样做的原因是我不是在创建一个简单的网页,而是一个大型的应用程序。仅仅因为你在错误的地方按了退格键而失去了10分钟的工作,这是非常令人恼火的。通过防止退格键返回,防止错误和讨厌用户的比例应该远远超过1000/1。
编辑2:我不是想阻止历史航行,只是想阻止事故。
EDIT3: @brentonstrines评论(因为这个问题太受欢迎了,所以移到这里):这是一个长期的“修复”,但你可以支持Chromium bug来改变webkit中的这种行为
JavaScript - jQuery方式:
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input, textarea")) {
e.preventDefault();
}
});
Javascript -本地的方式,这为我工作:
<script type="text/javascript">
//on backspace down + optional callback
function onBackspace(e, callback){
var key;
if(typeof e.keyIdentifier !== "undefined"){
key = e.keyIdentifier;
}else if(typeof e.keyCode !== "undefined"){
key = e.keyCode;
}
if (key === 'U+0008' ||
key === 'Backspace' ||
key === 8) {
if(typeof callback === "function"){
callback();
}
return true;
}
return false;
}
//event listener
window.addEventListener('keydown', function (e) {
switch(e.target.tagName.toLowerCase()){
case "input":
case "textarea":
break;
case "body":
onBackspace(e,function(){
e.preventDefault();
});
break;
}
}, true);
</script>
修改erikkallen's Answer以处理不同的输入类型
我发现,一个有进取心的用户可能会徒劳地按下复选框或单选按钮的退格键来清除它,相反,他们会向后导航,丢失所有的数据。
这个改变应该能解决这个问题。
新编辑地址内容可编辑div
//Prevents backspace except in the case of textareas and text inputs to prevent user navigation.
$(document).keydown(function (e) {
var preventKeyPress;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
switch (d.tagName.toUpperCase()) {
case 'TEXTAREA':
preventKeyPress = d.readOnly || d.disabled;
break;
case 'INPUT':
preventKeyPress = d.readOnly || d.disabled ||
(d.attributes["type"] && $.inArray(d.attributes["type"].value.toLowerCase(), ["radio", "checkbox", "submit", "button"]) >= 0);
break;
case 'DIV':
preventKeyPress = d.readOnly || d.disabled || !(d.attributes["contentEditable"] && d.attributes["contentEditable"].value == "true");
break;
default:
preventKeyPress = true;
break;
}
}
else
preventKeyPress = false;
if (preventKeyPress)
e.preventDefault();
});
例子
为了测试,制作2个文件。
Starthere.htm -先打开这个,这样你就有地方可以回去了
<a href="./test.htm">Navigate to here to test</a>
test.htm——当按下退格键,而复选框或提交有焦点(通过选项卡实现)时,它将向后导航。替换为我的代码来修复。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).keydown(function(e) {
var doPrevent;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
if (d.tagName.toUpperCase() == 'INPUT' || d.tagName.toUpperCase() == 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
}
else
doPrevent = true;
}
else
doPrevent = false;
if (doPrevent)
e.preventDefault();
});
</script>
</head>
<body>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</body>
</html>
这里的其他答案已经确定,如果没有允许退格的白名单元素,就不能做到这一点。这种解决方案并不理想,因为白名单不像仅仅是文本区域和文本/密码输入那样简单,而且经常被发现是不完整的,需要更新。
However, since the purpose of suppressing the backspace functionality is merely to prevent users from accidentally losing data, the beforeunload solution is a good one because the modal popup is surprising--modal popups are bad when they are triggered as part of a standard workflow, because the user gets used to dismissing them without reading them, and they are annoying. In this case, the modal popup would only appear as an alternative to a rare and surprising action, and is therefore acceptable.
问题是onbeforeunload模式不能在用户导航离开页面时弹出(例如单击链接或提交表单时),而且我们不想开始将特定的onbeforeunload条件列入白名单或黑名单。
对于一个通用的解决方案,折衷的理想组合如下:跟踪是否按下了退格,如果是的话,只弹出onbeforeunload模式。换句话说:
function confirmBackspaceNavigations () {
// http://stackoverflow.com/a/22949859/2407309
var backspaceIsPressed = false
$(document).keydown(function(event){
if (event.which == 8) {
backspaceIsPressed = true
}
})
$(document).keyup(function(event){
if (event.which == 8) {
backspaceIsPressed = false
}
})
$(window).on('beforeunload', function(){
if (backspaceIsPressed) {
backspaceIsPressed = false
return "Are you sure you want to leave this page?"
}
})
} // confirmBackspaceNavigations
这已经在IE7+, FireFox, Chrome, Safari和Opera中进行了测试。只需将这个函数放到global.js中,并从任何您不希望用户意外丢失数据的页面调用它。
注意onbeforeunload模式只能被触发一次,所以如果用户再次按下退格键,该模式将不会再次触发。
注意,这不会触发hashchange事件,但是在这种情况下,您可以使用其他技术来防止用户意外丢失数据。