Question

我在这里看到了我朋友的代码......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check action </TITLE>

<script>

    function detectEvent(){
    if(window.event.keyCode==13)
        {
            alert("you hit return!");
        }

    }
</script>


</HEAD>

<BODY>
    <form name="name1" onkeyup="detectEvent()" action="page2.html">
        <p> Field1
            <input type="text" id="text1"/>
        </p>
    </form>
</BODY>
</HTML>

当他尝试在文本框中输入一个值并按下回车时，它没有调用detectEvent（）。我说，它总是会在输入按钮上调用onSubmit ..... 他让我感到惊讶，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check action </TITLE>

<script>

    function detectEvent(){
    if(window.event.keyCode==13)
        {
            alert("you hit return!");
        }

    }
</script>


</HEAD>

<BODY>
    <form name="name1" onkeyup="detectEvent()" action="page2.html">
        <p> Field1
            <input type="text" id="text1"/>
        </p>
        <p> Field1
            <input type="text" id="text2"/>
        </p>
    </form>
</BODY>
</HTML>

现在按回车键，该函数被调用..... 为什么这样！？

为什么onKeyUp没有在只有一个字段的表单上调用。!!!我错过了什么吗？

Answer 1

事件的顺序是：

keydown
keypress
submit
keyup

因此，当您的keyup处理程序被调用时，表单已经开始提交。如果表单的action在本地文件系统上是page2.html，那么它将非常快速地导航，并且可能在调用keyup之前离开页面;另一方面，将action设置为外部网站，keyup将有时间触发。

添加第二个输入字段是一个不同的问题：在这种情况下，表单根本没有提交。这是一个奇怪的历史怪癖，浏览器将提交一个只有一个输入而没有提交按钮的表单，但拒绝提交一个包含多个输入的表单，并且没有提交按钮。这可以追溯到HTML 2.0规范：

如果表单中只有一个单行文本输入字段，则用户代理应接受该字段中的Enter作为提交表单的请求。

HTML 2.0未指定是否应接受Enter以在任何其他情况下提交表单（目的似乎只是复制古代<isindex>元素的功能），但浏览器这一天似乎已经解释为意味着Enter-submission不应该发生在有多个字段的地方，但是任何提交按钮都会导致Enter-submission无论如何发生。 IE和其他后来的浏览器复制了这种奇怪的行为。

无关联的观点：对window.event的依赖使代码不必要地仅限于IE。对于所有其他浏览器，事件对象作为参数传递给事件处理函数。您可以在HTML中执行onkeyup="detectEvent(event)"，然后在detectEvent函数中使用该参数，该函数适用于两个模型，因为使用了本地参数event或全局window.event 。但通常的方法是丢失事件处理程序属性并从JavaScript分配：

<form action="page2.html" id="enterform">
    <p> Field1
        <input type="text" id="text1">
        <!-- Note: *no* trailing slash - the doctype says HTML4, not XHTML -->
    </p>
</form>

<script type="text/javascript">
    document.getElementById('enterform').onkeyup= function(event) {
        if (event===undefined) event= window.event; // for IE
        if (event.keyCode===13)
            alert('You pressed Enter');
    };
</script>

说了这么多......我一般都怀疑捕获Enter键。我不太确定你要做什么，但如果这是改变表单中默认按钮的常见情况，这肯定不是这样做的方法，并会导致各种各样的问题。没有充分的理由你应该捕获Enter键来在表单上调用.submit()。

Answer 2

有趣的是，在Google Chrome中，带有第二个输入字段的表单仍会提交，因此无论您拥有多少字段，它都不会在keyup事件中捕获回车键。

解决方案=使用按键或keydown。

IE不会在具有ONE FIELD的表单上触发键盘事件

2 个答案: