Question

我不希望我的网站用户使用退格键转到上一页，
但是我仍然想继续使用退格，
就像删除错误的打字一样我该怎么办？

非常感谢。

Answer 1

正如其他人所提到的，有些方法可以监控退格键事件并执行不同的操作。

我建议不要捕获退格键，原因有两个：

1）这只是令人恼火和烦躁的用户可能无法返回您的页面。

2）Backspace不是返回上一页的唯一方法。还有其他一些组合可以完成同样的事情，以及明显的“后退按钮”。

不要这样做 - 但如果必须，请使用onbeforeunload（）而不是捕获浏览器特定的击键。

Answer 2

解决方案：将以下代码放在包含表单的所有网页的末尾：

<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas -->
<script type="text/javascript">
    function blockBackspaceAndEnter(e) {
        if (!e) { // IE reports window.event instead of the argument
            e = window.event;
        }
        var keycode;
        if (document.all) {
            // IE
            keycode = e.keyCode;
        } else {
            // Not IE
            keycode = e.which;
        }
        // Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password
        if ((keycode == 8
                && e.srcElement.type != "text"
                && e.srcElement.type != "textarea"
                && e.srcElement.type != "password")
                || (keycode == 13 && e.srcElement.type != "textarea")) {
            e.keyCode = 0;
            if (document.all) {
                // IE
                event.returnValue = false;
            } else {
                // Non IE
                Event.stop(e);
            }
        }
    }
    for (var i = 0; i < document.forms.length; i++) {
        document.forms[i].onkeydown = blockBackspaceAndEnter;
    }
</script>

我对其他人之前的回答有以下评论：

有人说：

“请不要。用户喜欢退格到去背;回去是最重要的浏览器功能之一打破它是无法忍受的粗鲁。“

我对他的回答是：

是的，通常人们会使用后退按钮返回，但不能使用带有FORMS的页面。另一方面，人们很容易在附近或外面意外点击输入文本或textarea ，然后按后退按钮，这样他们就会丢失所有编辑内容，正如其他人也注意到的那样：

“用户不在文本框中并点击了退格，完全失去了所有他们刚刚输入的表格信息。通常不会是一个问题，但是对我们来说，我们正在填写大量文字在长状态下。“

对于输入密钥以提交表单，也可以说同样的不受欢迎的行为，这对于包含少量字段的小表单通常是可取的（如果有的话），但不适用于包含许多字段和选择框以及输入框和textareas的表单，其中大部分时间您不希望在按Enter键时提交表单。

所以这就是为什么我建议上面的代码，它适用于所有＆lt; FORM＆gt;标记webster建议的函数，但没有检查ALT，我认为这没有用，并且没有检查CTRL + N和CTRL + R和CTRL + F5，我们不想阻止它，因为当它们被使用时，它们并非偶然。

不幸的是，当你的FORM中有DIV和TABLE 时，上面的代码在Firefox中不起作用！这是因为keydown事件似乎没有传播到包含表单，而是默认（UNDESIRED！）行为应用于Backspace和Enter键。我还没找到这个解决方案...

Answer 3

您可以使用body标签上的“onbeforeunload”属性来提示用户他将离开该页面。

Answer 4

当光标位于texarea，文本和密码控件中时，您只需使用以下代码段来阻止退格。

function onKeyDown() 
{    
    if((event.altKey) || ((event.keyCode == 8) &&
        (event.srcElement.type != "text" &&
        event.srcElement.type != "textarea" &&
        event.srcElement.type != "password")) ||
        ((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82)) ) || (event.keyCode == 116) ) {
    event.keyCode = 0;
    event.returnValue = false;}
 }

从body标签onkeydown事件

调用此函数

Answer 5

Filme Noi Cinema有正确的答案，但示例代码有点陈旧。我只需要这个解决方案，所以我想我会发布我用过的代码。

//I use the standard DOM method for accessing the body tag, because the
//non-standard HTML DOM shortcuts are not stable.  The correct behavior is
//dynamically attached to the entire body using the onkeypress event, which
//is the most stable event to target cross browser.
document.getElementsByTagName("body")[0].onkeypress = function (event) {
    var a = event || window.event, //get event cross browser
        b = a.target || a.srcElement; //get source cross browser

    //the only thing that matters is the backspace key
    if (a.keyCode === 8) {

        //if you are a textarea or input type text or password then fail
        if (b.nodeName === "textarea" || (b.nodeName === "input" && (b.getAttribute("type") === "text" || b.getAttribute("type") === "password"))) {
            return true;
        } else {

            //backspace is disabled for everything else
            return false;
        }
    }
};

此代码需要在用户开始使用页面之前执行。有很多方法可以做到这一点：

您可以将上述代码放入已附加到onload事件的任何函数中。
您可以包含绑定到页面的onload事件的上述代码。
您可以将上述代码放入自执行功能中。

示例：

//self executing function
(function () {
    the solution code here
}());

//wrapper to onload event
document.getElementsByTagName("body")[0].onload = function () {
    the solution code here
};

如果您想查看实际操作示例，我会将此代码添加到Pretty Diff。

Answer 6

您应该能够将onKeydown / Up / Press监听器附加到您的窗口。在此函数中，查看已按下的键代码以及事件目标。如果键码是退格键，并且目标不是输入框或文本区域，请阻止该事件。

Answer 7

我终于找到了适用于所有浏览器的产品。

由Hazem Saleh执导他的网站地址是： http://www.technicaladvices.com/2012/07/16/preventing-backspace-from-navigating-back-in-all-the-browsers/

/*Starts here:*/

  document.onkeydown = function (event) {

    if (!event) { /* This will happen in IE */
        event = window.event;
    }

    var keyCode = event.keyCode;

    if (keyCode == 8 &&
        ((event.target || event.srcElement).tagName != "TEXTAREA") && 
        ((event.target || event.srcElement).tagName != "INPUT")) { 

        if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
            event.stopPropagation();
        } else {
            alert("prevented");
            event.returnValue = false;
        }

        return false;
    }
  };  
/*Ends Here*/

Javascript：如何阻止退格字符？

7 个答案: