Question

我试图在所有情况下禁用订单页面上的退格按钮，除非textarea或文本输入是一个活动元素，以防止用户意外退出订单。我在大多数浏览器中都能正常工作，但在IE中（在IE9中测试，包括常规和兼容模式），它仍然允许用户点击退格并转到上一页。

以下是代码：

$(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;
            }
        }
    });

关于我在这里做错了什么建议吗？

谢谢！

Answer 1

我认为你过于复杂。而不是检查活动元素，而是找到事件目标。这应该为您提供所需的信息。当没有可见字符时，最好使用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();
        }
    }
});

NB我可以反过来这样做，而不是一个空的if块和else块中的所有代码，但我认为这更具可读性。

Answer 2

而不是按键，尝试keydown函数，它将在实际基于浏览器的钩子之前触发。此外，输入preventDefault（）函数将有助于此。 IE：

$(document).keydown(function(e){
   e.preventDefault();
   alert(e.keyCode);
});

希望这有帮助。

Answer 3

您可以做的最简单的事情是在第一行的第一个脚本中添加以下一行

window.history.forward(1);

Answer 4

大多数示例似乎都适用于JQuery框架 - 这是ExtJS的一个示例

（我最近得到了很多关于这个的问题，因为现在问题上有JQuery标签，它以前没有。如果你喜欢，我可以删除答案，但不是JQuery但是它已被证明帮助其他人不使用该框架。）

要使用此代码块添加此代码块，我建议将其添加到应用程序init函数（）中。

    /**
     * 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();
            }
        }
    });

Answer 5

使用e.which而不是e.keyCode; jQuery在浏览器中规范化这个值。

http://api.jquery.com/keydown/

确定按下了哪个键，检查事件对象传递给处理函数。而浏览器使用不同的属性存储此信息，jQuery 规范化.which属性，以便你可以可靠地使用它来检索关键代码。

然后，使用e.preventDefault（）;防止移动到上一页的默认行为。

Answer 6

    <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属性添加到正文中才能获得编辑键以转到函数。

Answer 7

好像＆＃34;退格＆＃34;也将作为＆＃34;导航回＆＃34;如果您还选择了单选按钮，复选框和正文。真的很烦人的表格 - 特别是在使用帖子时。所有的表格都可以通过＆＃34;退格＆＃34; key -_- ...

老实说 ...谁的想法是允许＆＃34;退格作为导航＆＃34;返回＆＃34;按钮！我认为这真的很糟糕。

我停用＆＃34; 退格＆＃34;任何非文本区域或文本字段的默认值 - 如下所示：

 $(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();
    }
    //

})

不确定除了这两个区域之外还有什么想要后退按钮的正常行为。

Answer 8

document.onkeydown = KeyPress;
function KeyPress(e) {
  if (!e.metaKey){
     e.preventDefault();
  }
}

如何在所有浏览器上禁用退格键按键？

8 个答案: