在 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。
EDIT2:我不是想阻止历史导航,只是意外。
EDIT3:@brentonstrines 评论(因为这个问题很受欢迎,所以移到这里):这是一个长期的“修复”,但您可以支持 Chromium bug to change this behavior in webkit
这段代码解决了这个问题,至少在 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;
}
}
});
此代码适用于所有浏览器,并且当不在表单元素上或表单元素被禁用|只读时吞下退格键。它也很有效,这在对输入的每个键执行时很重要。
$(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();
}
}
});
});
if(!rx.test(e.target.tagName) || $(e.target).is(':checkbox') || $(e.target).is(':radio') || $(e.target).is(':submit') || e.target.disabled || e.target.readOnly )
contentEditable
。
.is(':checkbox,:radio,:submit')
更简洁
这里的其他答案已经确定,如果没有将允许 Backspace 的元素列入白名单,就无法做到这一点。这种解决方案并不理想,因为白名单不像文本区域和文本/密码输入那样简单,而是反复发现不完整,需要更新。
然而,由于抑制退格功能的目的仅仅是为了防止用户意外丢失数据,因此 beforeunload 解决方案是一个很好的解决方案,因为模态弹出窗口令人惊讶——当作为标准工作流程的一部分触发模态弹出窗口时,它们是不好的,因为用户习惯于在不阅读它们的情况下解雇它们,而且它们很烦人。在这种情况下,模态弹出窗口只会作为罕见且令人惊讶的动作的替代品出现,因此是可以接受的。
问题是,当用户离开页面时(例如单击链接或提交表单时),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 事件上触发,但是在这种情况下,您可以使用其他技术来防止用户意外丢失他们的数据。
更优雅/简洁的解决方案:
$(document).on('keydown',function(e){
var $target = $(e.target||e.srcElement);
if(e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea'))
{
e.preventDefault();
}
})
修改 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();
});
示例 测试制作 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>
根据评论,您似乎希望阻止人们在表单中丢失信息,如果他们按退格键删除但该字段没有聚焦。
在这种情况下,您需要查看 onunload 事件处理程序。 Stack Overflow 使用它 - 如果您在开始编写答案时尝试离开页面,它会弹出警告。
大多数答案都在 jquery 中。您可以在纯 Javascript 中完美地做到这一点,简单且不需要库。 This 文章对我来说是一个很好的起点,但由于 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,转到“控制台”选项卡并在页面上按“退格键”并查看其内部以查看返回的值,然后您可以定位所有这些参数以进一步增强代码以上,以满足您的需求。
停止导航此代码有效!
$(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();
}
});
参考下面这个!
Prevent BACKSPACE from navigating back with jQuery (Like Google's Homepage)
结合“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();
});
});
不知道为什么没有人回答这个问题——这似乎是一个完全合理的技术问题,可以问这是否可能。
不,我认为没有跨浏览器的方式来禁用退格按钮。我知道这些天在 FF 中默认没有启用它。
我很难找到非 JQUERY 的答案。感谢 Stas 让我走上正轨。
Chrome:如果你不需要跨浏览器支持,你可以只使用黑名单,而不是白名单。这个纯 JS 版本在 Chrome 中工作,但在 IE 中不工作。不确定FF。
在 Chrome(2014 年年中,第 36 版)中,不在 input 或 contenteditable 元素上的按键似乎针对 <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 的答案是最好的。为 contenteditable 添加一项条件检查使其对我有用*:
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: 和 Spartan/TechPreview] 有一个“功能”,即 table-related elements uneditable。如果您单击其中一个然后按退格键,它将导航回来。如果您没有可编辑的 <td>
,这不是问题。
此解决方案与已发布的其他解决方案类似,但它使用简单的白名单,只需在 .is() 函数中设置选择器,即可轻松自定义以允许指定元素中的退格。
我以这种形式使用它来防止页面上的退格键向后导航:
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input:not([readonly]), textarea")) {
e.preventDefault();
}
});
为了稍微详细说明 @erikkallen 的 excellent answer,这里有一个函数允许所有基于键盘的输入类型,包括 those introduced in 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();
}
});
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>
我对接受的解决方案和 Select2.js 插件有一些问题;由于删除操作被阻止,我无法删除可编辑框中的字符。这是我的解决方案:
//Prevent backwards navigation when trying to delete disabled text.
$(document).unbind('keydown').bind('keydown', function (event) {
if (event.keyCode === 8) {
var doPrevent = false,
d = event.srcElement || event.target,
tagName = d.tagName.toUpperCase(),
type = (d.type ? d.type.toUpperCase() : ""),
isEditable = d.contentEditable,
isReadOnly = d.readOnly,
isDisabled = d.disabled;
if (( tagName === 'INPUT' && (type === 'TEXT' || type === 'PASSWORD'))
|| tagName === 'PASSWORD'
|| tagName === 'TEXTAREA') {
doPrevent = isReadOnly || isDisabled;
}
else if(tagName === 'SPAN'){
doPrevent = !isEditable;
}
else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
}
});
Select2 创建一个具有“contentEditable”属性的 Span,对于其中的可编辑组合框,该属性设置为 true。我添加了代码来说明 spans tagName 和不同的属性。这解决了我所有的问题。
编辑:如果您没有为 jquery 使用 Select2 组合框插件,那么您可能不需要此解决方案,并且接受的解决方案可能会更好。
document.onkeydown = function (e) {
e.stopPropagation();
if ((e.keyCode==8 || e.keyCode==13) &&
(e.target.tagName != "TEXTAREA") &&
(e.target.tagName != "INPUT")) {
return false;
}
};
此代码解决了所有浏览器中的问题:
onKeydown:function(e)
{
if (e.keyCode == 8)
{
var d = e.srcElement || e.target;
if (!((d.tagName.toUpperCase() == 'BODY') || (d.tagName.toUpperCase() == 'HTML')))
{
doPrevent = false;
}
else
{
doPrevent = true;
}
}
else
{
doPrevent = false;
}
if (doPrevent)
{
e.preventDefault();
}
}
DIV
或 TD
,我发现此代码无法按预期工作。
防止按退格键导航的最简单方法
$(document).keydown(function () {
if (event.keyCode == 8) {
if (event.target.nodeName == 'BODY') {
event.preventDefault();
}
}
});
使用 Dojo 工具包 1.7,这适用于 IE 8:
require(["dojo/on", "dojo/keys", "dojo/domReady!"],
function(on, keys) {
on(document.body,"keydown",function(evt){if(evt.keyCode == keys.BACKSPACE)evt.preventDefault()});
});
您是否尝试过将以下属性添加到只读文本字段的非常简单的解决方案:
onkeydown="返回假;"
当在只读文本字段中按下退格键时,这将防止浏览器返回历史记录。也许我错过了您的真实意图,但似乎这将是您问题的最简单解决方案。
一个更整洁的解决方案 -
$(document).on('keydown', function (e) {
var key = e == null ? event.keyCode : e.keyCode;
if(key == 8 && $(document.activeElement.is(':not(:input)'))) //select, textarea
e.preventDefault();
});
或者,您只能检查是否
$(document.activeElement).is('body')
纯 javascript 版本,适用于所有浏览器:
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 (regex.test(elements)) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
}
}
当然你可以使用“INPUT, TEXTAREA”然后使用“if (!regex.test(elements))”。第一个对我来说很好。
表现?
我担心性能并做了一个小提琴:http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/
var stresstest = function(e, method, index){...
我已经分析了我在这个线程中找到的最有前途的方法。事实证明,它们都非常快,并且很可能不会在打字时造成“迟缓”问题。我看到的最慢的方法是在 IE8 中进行 10.000 次调用大约需要 125 毫秒。即每笔划 0.0125 毫秒。
我发现 Codenepal 和 Robin Maben 发布的方法最快 ~ 0.001ms (IE8),但要注意不同的语义。
也许这对于将这种功能引入他的代码的人来说是一种解脱。
修改后的 erikkallen 答案:
$(document).unbind('keydown').bind('keydown', function (event) {
var doPrevent = false, elem;
if (event.keyCode === 8) {
elem = event.srcElement || event.target;
if( $(elem).is(':input') ) {
doPrevent = elem.readOnly || elem.disabled;
} else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
return false;
}
});
该解决方案在测试时效果很好。
我确实添加了一些代码来处理一些没有用输入标记的输入字段,并集成到为我的工作生成输入表单的 Oracle PL/SQL 应用程序中。
我的“两分钱”:
if (typeof window.event != ''undefined'')
document.onkeydown = function() {
//////////// IE //////////////
var src = event.srcElement;
var tag = src.tagName.toUpperCase();
if (event.srcElement.tagName.toUpperCase() != "INPUT"
&& event.srcElement.tagName.toUpperCase() != "TEXTAREA"
|| src.readOnly || src.disabled
)
return (event.keyCode != 8);
if(src.type) {
var type = ("" + src.type).toUpperCase();
return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
}
}
else
document.onkeypress = function(e) {
//////////// FireFox
var src = e.target;
var tag = src.tagName.toUpperCase();
if ( src.nodeName.toUpperCase() != "INPUT" && tag != "TEXTAREA"
|| src.readOnly || src.disabled )
return (e.keyCode != 8);
if(src.type) {
var type = ("" + src.type).toUpperCase();
return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
}
}
我创建了一个 NPM 项目,它具有当前接受的(erikkallen 的)的干净版本
https://github.com/slorber/backspace-disabler
它使用基本相同的原理,但是:
无依赖
支持内容可编辑
更具可读性/可维护性的代码库
将得到支持,因为它将被我的公司用于生产
麻省理工学院执照
var Backspace = 8;
// See http://stackoverflow.com/questions/12949590/how-to-detach-event-in-ie-6-7-8-9-using-javascript
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
function removeHandler(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
// Test wether or not the given node is an active contenteditable,
// or is inside an active contenteditable
function isInActiveContentEditable(node) {
while (node) {
if ( node.getAttribute && node.getAttribute("contenteditable") === "true" ) {
return true;
}
node = node.parentNode;
}
return false;
}
var ValidInputTypes = ['TEXT','PASSWORD','FILE','EMAIL','SEARCH','DATE'];
function isActiveFormItem(node) {
var tagName = node.tagName.toUpperCase();
var isInput = ( tagName === "INPUT" && ValidInputTypes.indexOf(node.type.toUpperCase()) >= 0 );
var isTextarea = ( tagName === "TEXTAREA" );
if ( isInput || isTextarea ) {
var isDisabled = node.readOnly || node.disabled;
return !isDisabled;
}
else if ( isInActiveContentEditable(node) ) {
return true;
}
else {
return false;
}
}
// See http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
function disabler(event) {
if (event.keyCode === Backspace) {
var node = event.srcElement || event.target;
// We don't want to disable the ability to delete content in form inputs and contenteditables
if ( isActiveFormItem(node) ) {
// Do nothing
}
// But in any other cases we prevent the default behavior that triggers a browser backward navigation
else {
event.preventDefault();
}
}
}
/**
* By default the browser issues a back nav when the focus is not on a form input / textarea
* But users often press back without focus, and they loose all their form data :(
*
* Use this if you want the backspace to never trigger a browser back
*/
exports.disable = function(el) {
addHandler(el || document,"keydown",disabler);
};
/**
* Reenable the browser backs
*/
exports.enable = function(el) {
removeHandler(el || document,"keydown",disabler);
};
这是我对最高投票答案的重写。我尝试检查 element.value!==undefined (因为某些元素可能没有 html 属性,但可能在原型链的某处具有 javascript value 属性),但是效果不佳并且有很多边缘情况。似乎没有一个很好的方法来证明这一点,所以白名单似乎是最好的选择。
这会在事件冒泡阶段结束时注册元素,因此如果您想以任何自定义方式处理 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
Sitepoint: Disable back for Javascript
event.stopPropagation()
和 event.preventDefault()
在 IE 中什么都不做。不过,我不得不发送 return event.keyCode == 11
(我刚刚选择了一些东西)而不是仅仅说 "if not = 8, run the event"
才能让它工作。 event.returnValue = false
也有效。
使用jquery的另一种方法
<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
var jCtrl = null;
jCtrl = $('input[type="text"]');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
jCtrl = $('input[type="password"]');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
jCtrl = $('textarea');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
//disable backspace for readonly and disabled
jCtrl = $('input[type="text"][readonly="readonly"]')
jCtrl.keypress(fnPreventBackspace);
jCtrl.keydown(fnPreventBackspace);
jCtrl = $('input[type="text"][disabled="disabled"]')
jCtrl.keypress(fnPreventBackspace);
jCtrl.keydown(fnPreventBackspace);
}
});
</script>
我已经在我的代码中使用它一段时间了。我为学生编写了在线测试,当学生在测试期间按退格键时遇到了问题,这会让他们回到登录屏幕。令人沮丧!它肯定适用于FF。
document.onkeypress = Backspace;
function Backspace(event) {
if (event.keyCode == 8) {
if (document.activeElement.tagName == "INPUT") {
return true;
} else {
return false;
}
}
}
d.type.toUpperCase() === 'PASSWORD'
以及。否则看起来不错if( $(d).is( ":input" ) )...
d.isContentEditable
的检查。