Javascript:如何阻止退格字符?

时间:2009-03-25 04:09:33

标签: javascript

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

非常感谢。

7 个答案:

答案 0 :(得分:11)

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

我建议不要捕获退格键,原因有两个:

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

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

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

答案 1 :(得分:11)

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

<!-- 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键。 我还没找到这个解决方案...

答案 2 :(得分:6)

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

答案 3 :(得分:1)

当光标位于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事件

调用此函数

答案 4 :(得分:1)

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;
        }
    }
};

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

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

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

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

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

由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*/