eri*_*len 268 javascript firefox jquery internet-explorer cross-browser
在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中的这种行为
eri*_*len 329
这个代码解决了这个问题,至少在IE和Firefox中(没有测试任何其他的,但如果问题甚至存在于其他浏览器中,我给它一个合理的工作机会).
// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
if (event.keyCode === 8) {
var doPrevent = true;
var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
var d = $(event.srcElement || event.target);
var disabled = d.prop("readonly") || d.prop("disabled");
if (!disabled) {
if (d[0].isContentEditable) {
doPrevent = false;
} else if (d.is("input")) {
var type = d.attr("type");
if (type) {
type = type.toLowerCase();
}
if (types.indexOf(type) > -1) {
doPrevent = false;
}
} else if (d.is("textarea")) {
doPrevent = false;
}
}
if (doPrevent) {
event.preventDefault();
return false;
}
}
});
the*_*man 61
此代码适用于所有浏览器,并且当不在表单元素上时,或者如果表单元素被禁用,则会吞下退格键.它也很有效,当它在每个键入的键上执行时很重要.
$(function(){
/*
* this swallows backspace keys on any non-input element.
* stops backspace -> back
*/
var rx = /INPUT|SELECT|TEXTAREA/i;
$(document).bind("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
e.preventDefault();
}
}
});
});
Vla*_*nea 41
这里的其他答案已经确定,如果没有允许Backspace的白名单元素,就无法做到这一点.此解决方案并不理想,因为白名单不仅仅是textareas和文本/密码输入,而是反复发现不完整且需要更新.
但是,由于抑制退格功能的目的仅仅是为了防止用户意外丢失数据,因此前载加载解决方案是一个很好的解决方案,因为模式弹出窗口令人惊讶 - 当模式弹出窗口作为标准工作流程的一部分被触发时,它们很糟糕,因为用户习惯于在不阅读它们的情况下解雇它们,而且它们很烦人.在这种情况下,模态弹出窗口只会作为罕见且令人惊讶的动作的替代,因此是可以接受的.
问题是每当用户离开页面时(例如单击链接或提交表单时)都不会弹出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中,然后从不希望用户意外丢失数据的任何页面调用它.
请注意,这不会触发hashchange事件,但在该上下文中,您可以使用其他技术来防止用户意外丢失其数据.
Dar*_*yne 24
更优雅/简洁的解决方案:
$(document).on('keydown',function(e){
var $target = $(e.target||e.srcElement);
if(e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea'))
{
e.preventDefault();
}
})
Bif*_*iff 15
修改erikkallen的答案以解决不同的输入类型
我发现一个有进取心的用户可能会在复选框或单选按钮上按退格键,徒劳地尝试清除它,而是会向后导航并丢失所有数据.
此更改应解决该问题.
新编辑以处理内容可编辑的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();
});
示例
测试make 2文件.
starthere.htm - 首先打开它,这样你就有了回归的地方
<a href="./test.htm">Navigate to here to test</a>
test.htm - 当复选框或提交具有焦点(通过Tab键实现)时,按下退格键时将向后导航.替换为我的代码来修复.
<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>
根据评论显示,您希望阻止人们丢失表单中的信息,如果他们按退格键删除但该字段没有聚焦.
在这种情况下,您要查看onunload事件处理程序.Stack Overflow使用它 - 如果您在开始编写答案时尝试离开页面,它会弹出警告.
小智 7
停止导航此代码有效!
$(document).on("keydown", function (event) {
if (event.keyCode === 8) {
event.preventDefault();
}
});
但是为了不限制文本字段而是限制其他字段
$(document).on("keydown", function (event) {
if (event.which === 8 && !$(event.target).is("input, textarea")) {
event.preventDefault();
}
});
为了防止特定领域的使用,只需使用
$('#myOtherField').on("keydown", function (event) {
if (event.keyCode === 8 || event.which === 8) {
event.preventDefault();
}
});
参考下面这个!
阻止BACKSPACE使用jQuery导航(如Google的主页)
大多数答案都在jquery中.您可以在纯Javascript中完美地完成此操作,简单且无需库.这篇文章对我来说是一个很好的起点,但由于不推荐使用keyIdentifier,我希望这段代码更安全,所以我在if语句中添加了|| e.keyCode == 8.此外,代码在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>
这段代码效果很好,因为,
你可以添加console.log(e); 为了您的测试目的,并在Chrome中点击F12,转到"控制台"选项卡并点击页面上的"退格"并查看其中的内容以查看返回的值,然后您可以定位所有这些参数以进一步增强代码以上是为了满足您的需求.
不知道为什么没人会回答这个问题 - 这似乎是一个非常合理的技术问题,可以问这是否可行.
不,我认为没有跨浏览器方式来禁用退格按钮.我知道这些天默认情况下它没有默认启用.
小智 5
结合"thetoolman"&&"Biff MaGriff"给出的解决方案
以下代码似乎在IE 8/Mozilla/Chrome中正常工作
$(function () {
var rx = /INPUT|TEXTAREA/i;
var rxT = /RADIO|CHECKBOX|SUBMIT/i;
$(document).bind("keydown keypress", function (e) {
var preventKeyPress;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
if (rx.test(e.target.tagName)) {
var preventPressBasedOnType = false;
if (d.attributes["type"]) {
preventPressBasedOnType = rxT.test(d.attributes["type"].value);
}
preventKeyPress = d.readOnly || d.disabled || preventPressBasedOnType;
} else {preventKeyPress = true;}
} else { preventKeyPress = false; }
if (preventKeyPress) e.preventDefault();
});
});