Question

我正在通过O'Reilly媒体的Head First系列书籍学习JavaScript，我刚刚到了一章，我必须使用onchange事件。

我正在使用Safari / OS X Lion，Firefox，Chrome，Opera和IE / Windows进行测试，但结果相同。

鉴于此代码：

<html>
    <head>
        <title>onChange Test</title>
        <script type="text/javascript">
            function itWorks(){
                alert("it works!");   
            }
        </script>
    </head>
    <body>
        <form>
            <input type="text" onchange="itWorks();" />
            <input type="text" onchange="itWorks();" />
        </form>
    </body>
<html>

当我们从一个字段更改为另一个字段时，无论是仅通过单击还是使用TAB键激活，onchange事件都可以正常工作，这是正确的吗？

Answer 1

onchange事件在以下时间触发：

焦点离开现场
如果自获得焦点后价值发生了变化

焦点丢失无关紧要，焦点不需要转移到另一个领域（链接可以集中，或者文档中没有任何内容可以等）。

Answer 2

“我们从一个字段更改为另一个字段，无论是通过单击还是通过使用TAB键“ -

多数民众赞成。

每当您更改输入值时，您编码的事件都会触发，然后离开该字段。 EG：在字段中输入内容，然后按TAB键。

您的示例代码对我有效。

Answer 3

您描述的行为是onfocus。 onchange在输入值更改时执行。如果您在字段中键入内容，它应该运行。

Answer 4

“只是为了澄清，每当我们从一个字段更改为另一个字段时，onchange事件都会起作用，无论是通过点击还是使用TAB键，对吧？”

是 - 只要值已更改

我不确定问题是什么 - 你的代码有效！我在tested it上jsfiddle.net - 非常适合学习/测试javascript。

（你应该关闭你的html标签btw）......

Answer 5

这就是HTML5 draft spec says：

不重点的步骤如下：

如果元素是输入元素，则更改事件适用   到元素，元素没有定义激活   行为，用户已更改元素的值或其列表   控件聚焦时选择的文件而不提交   更改，然后触发一个名为更改的气泡的简单事件   元件。

取消焦点元素。

在元素上触发一个名为blur的简单事件。

请注意，更改也可以在其他时间触发。 The spec also says：


...每次用户提交更改元素的值或列表时   选定的文件，用户代理必须排队任务才能触发简单   名为的气泡在输入元素处更改的事件。

接下来提供几个“提交变更”的例子


具有提交操作的用户界面的示例将是文件   上传控件，包含一个显示文件的按钮   选择对话框：当对话框关闭时，如果是该文件   结果改变了选择，然后用户提交了一个新文件   选择。

具有提交操作的用户界面的另一个示例是a   日期控件，允许基于文本的用户输入和用户选择   从下拉日历中：文本输入可能没有明确的   提交步骤，从下拉日历中选择日期然后   解雇下拉将是一个提交行动。

onchange不起作用

5 个答案: