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

发布于 2024-11-14 15:58:07 字数 689 浏览 5 评论 0原文

我尝试在所有情况下禁用订单页面上的退格按钮，除非文本区域或文本输入是活动元素，以防止用户意外退出订单。我让它在大多数浏览器中工作正常，但在 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;
            }
        }
    });

对我在这里做错了什么有什么建议吗？

谢谢！

原文

I'm trying to disable the backspace button on an order page in all cases except when a textarea or text input is an active element to prevent users from accidentally backing out of an order. I have it working fine in most browsers, but in IE (testing in IE9, both regular and compatibility mode) it still allows the user to hit the backspace and go to the previous page.

Here's the code:

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

Any advice on what I'm doing wrong here?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

久光 2024-11-21 15:58:07

我认为你把这个问题过于复杂化了。不是检查活动元素，而是查找事件目标。这应该会为您提供所需的信息。当没有可见字符时，最好使用 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 块中，但我认为这更具可读性。

I think you're overcomplicating that. Rather than checking for an active element, find the event target instead. This should give you the information you need. It's also better to use keydown rather than keypress when there is no visible character. Finally, it's better to use e.preventDefault() for better granularity.

$(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 I could have done this the other way round, rather than an empty if block and all the code going in the else block, but I think this is more readable.

回复收藏 0 原文

岁月如刀 2024-11-21 15:58:07

不要尝试按键，而是尝试 keydown 函数，它会在实际的基于浏览器的钩子之前触发。另外，添加一个 PreventDefault() 函数将有助于此。 IE：

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

希望这有帮助。

Instead of keypress, try the keydown function, it will fire before the actual browser based hook. Also, putting in a preventDefault() function will assist in this. IE :

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

Hope this helps.

回复收藏 0 原文

画▽骨i 2024-11-21 15:58:07

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

window.history.forward(1);

The most Simple thing you can do is add the following one line in the very first script of you page at very first line

window.history.forward(1);

回复收藏 0 原文

梦幻之岛 2024-11-21 15:58:07

大多数例子似乎都是针对 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();
            }
        }
    });

Most examples seem to be for the JQuery framework - Here an example for ExtJS

(I've been getting a lot of downvotes for this recently as the question now has JQuery tag on it, which it didn't previously. I can remove the answer if you like as isn't for JQuery but it's proven to help others not using that framework).

To use this add this code block to your code base, I recommend adding it inside the applications 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();
            }
        }
    });

回复收藏 0 原文

留蓝 2024-11-21 15:58:07

使用 e.which 代替 e.keyCode； jQuery 跨浏览器标准化该值。

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

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

然后，使用 e.preventDefault();以防止移至上一页的默认行为。

回复收藏 0 原文

瀟灑尐姊 2024-11-21 15:58:07

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

    <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

I had to add the onDownKey attribute to the body in order to get editing keys to go to the functions.

回复收藏 0 原文

淑女气质 2024-11-21 15:58:07

$(document).keydown(function(e) {
    var elid = $(document.activeElement).is('input');
    if (e.keyCode === 8 && !elid) {
        return false;
    }
});

希望这可以帮助你

$(document).keydown(function(e) {
    var elid = $(document.activeElement).is('input');
    if (e.keyCode === 8 && !elid) {
        return false;
    }
});

Hope this might help you

回复收藏 0 原文

甜心小果奶 2024-11-21 15:58:07

如果您选择了文档的单选按钮、复选框和正文，那么“退格键”似乎也将充当“导航返回”出色地。对于表单来说真的很烦人 - 特别是在使用帖子时。只要按一下“退格”键，所有的表格都会丢失 -_- ...

老实说...谁的主意是允许“退格”作为导航“后退”按钮！真是个糟糕的主意

在我看来，我在任何非文本区域或文本字段上禁用“退格”默认值，这

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

})

- 就像这样：不确定还有什么地方需要后退的正常行为。 -按钮位于这两个区域之外。

Seems like the "backspace" will also act as "navigation back" if you have selected radio buttons, check-boxes and body of document as well. Really annoying for forms - especially when using post. All the form could be lost with one slip of the "backspace" key -_- ...

Honestly... who's idea was it to allow the "backspace as a navigational "back" button!!! really bad idea in my opinion.

I disable the "backspace" default on anything that is not a text area or text field - like this:

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

})

Not sure where else one would want the normal behavior of a back-button other than in these two areas.

回复收藏 0 原文

雪花飘飘的天空 2024-11-21 15:58:07

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

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

回复收藏 0 原文

~没有更多了~

关于作者

怕倦

暂无简介

文章

24 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

陈静维

深海里的那抹蓝

给妤﹃绝世温柔

谢绝鈎搭

时光清浅

温柔女人霸气范

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

陈静维

深海里的那抹蓝

给妤﹃绝世温柔

谢绝鈎搭

时光清浅

温柔女人霸气范

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。