在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中的这种行为
大多数答案是用jquery。您可以在纯Javascript中完美地做到这一点,简单且不需要库。这篇文章对我来说是一个很好的起点,但由于keyIdentifier已弃用,我希望这段代码更安全,所以我添加了||e。keyCode==8到if语句。此外,代码在Firefox上运行不好,所以我添加了return false;现在它运行得非常好。下面就是:
<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+0008'||e.keyIdentifier=='Backspace'||e.keyCode==8){if(e.target==document.body){e.preventDefault();return false;}}},true);
</script>
这段代码很好用,
它是纯javascript(不需要库)。
它不仅检查按下的键,还确认操作是否真的是浏览器的“返回”操作。
加上上述,用户可以输入和删除文本从输入文本框在网页上没有任何问题,同时仍然阻止后退按钮动作。
它短小、干净、快速、直截了当。
您可以添加console.log(e);为了你的测试目的,在chrome中按F12,转到“控制台”选项卡,点击页面上的“退格键”,看看里面返回了什么值,然后你可以针对所有这些参数进一步增强上面的代码,以满足你的需要。
这里的其他答案已经确定,如果没有允许退格的白名单元素,就不能做到这一点。这种解决方案并不理想,因为白名单不像仅仅是文本区域和文本/密码输入那样简单,而且经常被发现是不完整的,需要更新。
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事件,但是在这种情况下,您可以使用其他技术来防止用户意外丢失数据。
我很难找到一个非jquery的答案。谢谢斯塔斯让我走上赛道。
Chrome:如果你不需要跨浏览器支持,你可以使用黑名单,而不是白名单。这个纯JS版本可以在Chrome中运行,但不能在IE中运行。不确定FF。
在Chrome(版本。36, 2014年年中),按键不是在输入或可满足的元素似乎是针对<BODY>。这使得使用黑名单成为可能,我更喜欢使用白名单。IE使用最后一次点击目标-所以它可能是一个div或其他任何东西。这使得这个在IE中毫无用处。
window.onkeydown = function(event) {
if (event.keyCode == 8) {
//alert(event.target.tagName); //if you want to see how chrome handles keypresses not on an editable element
if (event.target.tagName == 'BODY') {
//alert("Prevented Navigation");
event.preventDefault();
}
}
}
跨浏览器:对于纯javascript,我发现Stas的答案是最好的。增加一个条件检查contentteditable使它为我工作*:
document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}
function stopDefaultBackspaceBehaviour(event) {
var event = event || window.event;
if (event.keyCode == 8) {
var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
var d = event.srcElement || event.target;
var regex = new RegExp(d.tagName.toUpperCase());
if (d.contentEditable != 'true') { //it's not REALLY true, checking the boolean value (!== true) always passes, so we can use != 'true' rather than !== true/
if (regex.test(elements)) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
}
}
}
*注意ie [edit: and Spartan/TechPreview]有一个“特性”,使与表相关的元素不可编辑。如果你点击其中一个,然后按退格键,它会导航回来。如果你没有editable <td>s,这不是一个问题。