在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中的这种行为
以下是我对得票最多的答案的改写。我试着检查element.value!==undefined(因为有些元素可能没有HTML属性,但可能在原型链的某个地方有javascript值属性),然而这并不是很好,并且有很多边缘情况。似乎没有一个很好的方法来证明这一点,所以白名单似乎是最好的选择。
这将在事件气泡阶段的末尾注册元素,因此如果您想以任何自定义方式处理Backspace,您可以在其他处理程序中这样做。
这也检查instanceof HTMLTextAreElement,因为理论上可以有一个继承自它的web组件。
这不会检查contentEditable(与其他答案结合)。
https://jsfiddle.net/af2cfjc5/15/
var _INPUTTYPE_WHITELIST = ['text', 'password', 'search', 'email', 'number', 'date'];
function backspaceWouldBeOkay(elem) {
// returns true if backspace is captured by the element
var isFrozen = elem.readOnly || elem.disabled;
if (isFrozen) // a frozen field has no default which would shadow the shitty one
return false;
else {
var tagName = elem.tagName.toLowerCase();
if (elem instanceof HTMLTextAreaElement) // allow textareas
return true;
if (tagName=='input') { // allow only whitelisted input types
var inputType = elem.type.toLowerCase();
if (_INPUTTYPE_WHITELIST.includes(inputType))
return true;
}
return false; // everything else is bad
}
}
document.body.addEventListener('keydown', ev => {
if (ev.keyCode==8 && !backspaceWouldBeOkay(ev.target)) {
//console.log('preventing backspace navigation');
ev.preventDefault();
}
}, true); // end of event bubble phase
大多数答案是用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,转到“控制台”选项卡,点击页面上的“退格键”,看看里面返回了什么值,然后你可以针对所有这些参数进一步增强上面的代码,以满足你的需要。
为了稍微详细说明@erikkallen的精彩回答,这里有一个允许所有基于键盘的输入类型的函数,包括HTML5中引入的那些:
$(document).unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
var INPUTTYPES = [
"text", "password", "file", "date", "datetime", "datetime-local",
"month", "week", "time", "email", "number", "range", "search", "tel",
"url"];
var TEXTRE = new RegExp("^" + INPUTTYPES.join("|") + "$", "i");
if (event.keyCode === 8) {
var d = event.srcElement || event.target;
if ((d.tagName.toUpperCase() === 'INPUT' && d.type.match(TEXTRE)) ||
d.tagName.toUpperCase() === 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
} else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
}
});