如何防止 Backspace 在 javascript 中导航回来？答案

【问题标题】：How can I prevent Backspace from navigating back in javascript?如何防止 Backspace 在 javascript 中导航回来？
【发布时间】：2011-10-19 15:04:46
【问题描述】：

这适用于 IE，但我无法让它在 Opera 或 Firefox 中运行。当且仅当当前焦点是 SELECT 下拉菜单时，我想防止 Backspace 导航离开。

<html>
<body>
<select id="testselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<script language="javascript">
    document.getElementById("testselect").onkeydown = function(e) {
        if(!e) {
            e = event;
        }
        alert(e.keyCode);
        if (e.keyCode == 8 || e.keyCode == 46) {
       e.returnValue = false;

        e.cancelBubble = true;
        if (e.stopPropagation) { e.stopPropagation(); alert("stoppropagation");}
        if (e.preventDefault) { e.preventDefault(); alert("preventdefault");}
        return false;
        }
    };
</script>
</body>
</html>

【问题讨论】：

+1 帮助我意识到“退格导航”适用于 keydown 而不是 keyup。我一直认为我必须每页点击一次才能返回，但现在我意识到我可以按住它。
哦，我安装了 firebug，现在这个示例可以在 firefox 中使用。不知道为什么。

标签： javascript

【解决方案1】：

使用 jquery - 仅用于选择下拉菜单

$(document).ready(function(){ 
     //for IE use keydown, for Mozilla keypress  
     //as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
     $('select').keypress(function(event){if (event.keyCode == 8) {return false;}});
     $('select').keydown(function(event){if (event.keyCode == 8) {return false;}});
}

页面中除输入控件和文本区域外的所有元素如下

<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
            $('input').keypress(fnPreventBackspacePropagation);
            $('input').keydown(fnPreventBackspacePropagation);
            $('textarea').keypress(fnPreventBackspacePropagation);
            $('textarea').keydown(fnPreventBackspacePropagation);
        }
    }); 

</script>

【讨论】：

【解决方案2】：

这比我想象的要复杂。根据您阻止用户退格离开页面的原因，this 之类的内容可能适合您：

<script type="text/javascript">

        var bShowWarning = false;

        document.getElementById("testselect").onkeydown = function(e) {
            if (!e) {
                e = event;
            }
            if (e.keyCode == 8 || e.keyCode == 46) {
                bShowWarning = true;
            }
        };

        function UnLoadWindow() {
            if (!bShowWarning) return;
            return 'If you leave the page your data will be lost.';
        }

        window.onbeforeunload = UnLoadWindow;
    </script>

【讨论】：

【解决方案3】：

好吧，事实证明 Opera 需要在 onkeypress 事件中取消该事件，而不是 onkeydown。

参考：http://jimblackler.net/blog/?p=20

【讨论】：

【解决方案4】：

您可能想从this article 查看项目的源代码。他详细介绍了他如何在不同的浏览器中处理退格键。

【讨论】：