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

标签 javascript html events

我在这里看到我 friend 的代码...

<!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。!!!我错过了什么吗?

最佳答案

事件顺序是:

keydown
keypress
submit
keyup

那么到你的 keyup 时处理程序将被调用,表单已经开始提交。如果action形式是 page2.html在本地文件系统上,导航速度非常快,可能会离开 keyup 之前的页面可以调用;设置action另一方面,到外部站点,和keyup将有时间开火。

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

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

HTML 2.0 没有指定在任何其他情况下是否应该接受 Enter 来提交表单(其意图似乎只是复制古老的 <isindex> 元素的功能),但是当时的浏览器似乎已经将其解释为意味着在有多个字段的情况下不应该发生 Enter-submission,但是任何提交按钮都会导致 Enter-submission 发生。 IE 和其他后来的浏览器复制了这种奇怪的行为。

无关点:对window.event的依赖使代码不必要地仅适用于 IE。对于所有其他浏览器,事件对象作为参数传递给事件处理函数。你可以做 onkeyup="detectEvent(event)"在 HTML 中,然后在 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()在表格上。

关于javascript - IE 不在具有 ONE FIELD 的表单上触发键盘事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2507467/

相关文章:

javascript - 用户关闭窗口时清除本地存储

javascript - Acrobat Reader 无法识别相对路径

html - 如何在 CSS/HTML 中创建一个简单的社交分享下拉菜单

Jquery点击html标签时触发两次事件

javascript - 在 $routeProvider 解析方法中注入(inject) Controller

javascript - HTML5 Websockets 服务器要求

javascript - Javascript 只调用一次函数

html - 下拉菜单在 IE 9 中不起作用

C# 进程终止通知

JQuery 输入元素