[英]How can I disabling backspace key press on all browsers?
我试图在所有情况下禁用订单页面上的退格按钮,除非文本区域或文本输入是活动元素以防止用户意外退出订单。 我让它在大多数浏览器中都能正常工作,但在 IE 中(在 IE9 中测试,常规模式和兼容模式)它仍然允许用户点击退格键和 go 到上一页。
这是代码:
$(document).keypress(function(e){
var activeNodeName=document.activeElement.nodeName;
var activeElType=document.activeElement.type;
if (e.keyCode==8 && activeNodeName != 'INPUT' && activeNodeName != 'TEXTAREA'){
return false;
} else {
if (e.keyCode==8 && activeNodeName=='INPUT' && activeElType != 'TEXT' && activeElType != 'text'){
return false;
}
}
});
关于我在这里做错了什么有什么建议吗?
谢谢!
我认为你过于复杂了。 与其检查活动元素,不如找到事件目标。 这应该为您提供所需的信息。 当没有可见字符时,最好使用keydown
而不是keypress
。 最后,最好使用e.preventDefault()
以获得更好的粒度。
$(document).keydown(function(e) {
var nodeName = e.target.nodeName.toLowerCase();
if (e.which === 8) {
if ((nodeName === 'input' && e.target.type === 'text') ||
nodeName === 'textarea') {
// do nothing
} else {
e.preventDefault();
}
}
});
注意我本可以反过来做,而不是一个空的if
块和所有代码都放在else
块中,但我认为这更具可读性。
您可以做的最简单的事情是在您页面的第一个脚本的第一行添加以下一行
window.history.forward(1);
大多数示例似乎是针对 JQuery 框架的 - 这里是 ExtJS 的示例
(我最近收到了很多反对票,因为这个问题现在有 JQuery 标签,这是以前没有的。如果你喜欢,我可以删除答案,因为不是 JQuery 但事实证明它可以帮助其他人不使用该框架)。
要使用此代码块,请将此代码块添加到您的代码库中,我建议将其添加到应用程序的 init function() 中。
/**
* This disables the backspace key in all browsers by listening for it on the keydown press and completely
* preventing any actions if it is not which the event fired from is one of the extjs nodes that it should affect
*/
Ext.EventManager.on(window, 'keydown', function(e, t) {
var nodeName = e.target.nodeName.toLowerCase();
if (e.getKey() == e.BACKSPACE) {
if ((nodeName === 'input' && e.target.type === 'text') ||
nodeName === 'textarea') {
// do nothing
} else {
e.preventDefault();
}
}
});
尝试使用 keydown function 而不是按键,它将在实际基于浏览器的钩子之前触发。 此外,放入 preventDefault() function 将有助于此。 IE:
$(document).keydown(function(e){
e.preventDefault();
alert(e.keyCode);
});
希望这可以帮助。
$(document).keydown(function(e) {
var elid = $(document.activeElement).is('input');
if (e.keyCode === 8 && !elid) {
return false;
}
});
希望这可以帮助你
使用 e.which 代替 e.keyCode; jQuery 跨浏览器规范化这个值。
http://api.jquery.com/keydown/
要确定按下了哪个键,请检查传递给处理程序 function 的事件 object。 虽然浏览器使用不同的属性来存储此信息,但 jQuery 标准化了 .which 属性,以便您可以可靠地使用它来检索密钥代码。
然后,使用 e.preventDefault(); 以防止移动到上一页的默认行为。
<html>
<head>
<script type="text/javascript">
function stopKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 8) && (node.type!="text")) {return false;}
}
document.onkeypress = stopKey;
</script>
</head>
<body onkeydown="return stopKey()">
<form>
<input type="TEXTAREA" name="var1" >
<input type="TEXT" name="var2" >
</form>
</body>
</html
我必须将 onDownKey 属性添加到正文中,以便将 go 的编辑键添加到函数中。
如果您还选择了单选按钮、复选框和文档正文,似乎“退格”也将充当“导航返回”。 forms 真的很烦人——尤其是在使用 post 时。 只需按一下“退格”键-_-...,所有表格都可能丢失。
老实说......谁的想法是允许“退格”作为导航“后退”按钮。!!在我看来真是个坏主意。
我在非文本区域或文本字段的任何内容上禁用“退格”默认值 - 如下所示:
$(document).keydown(function(e){
console.log(e.keyCode+"\n");
var typeName = e.target.type;//typeName should end up being things like 'text', 'textarea', 'radio', 'undefined' etc.
console.log(typeName+"\n");
// Prevent Backspace as navigation backbutton
if(e.keyCode == 8 && typeName != "text" && typeName != "textarea"){
console.log("Prevent Backbutton as Navigation Back"+typeName+"\n");
e.preventDefault();
}
//
})
不知道除了这两个区域之外,还有什么地方需要后退按钮的正常行为。
document.onkeydown = KeyPress;
function KeyPress(e) {
if (!e.metaKey){
e.preventDefault();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.