【问题标题】:Detecting a change in radio button/checkbox state检测单选按钮/复选框状态的变化
【发布时间】:2011-08-02 13:35:26
【问题描述】:

我需要可靠地检测页面上单选按钮/复选框的状态变化,以便查看表单是否被修改。现在,这是一个完全独立的脚本,我无法修改任何控制表单的内容。

目前,我只能看到两种方法:

  • onchange 事件处理程序,有助于处理文本框、文本区域和选择,但不会触发复选框/单选按钮
  • onclick 事件处理程序,不可靠,因为用户经常使用热键来更改这些元素的值。

我在这里缺少什么?有没有办法可靠地检测复选框被选中/取消选中?

更新:正如你们所指出的,change 事件确实是在复选框/单选按钮上触发的,尽管 w3schools 说它仅适用于text inputs

然而,我的问题原来是复选框/单选按钮的值是通过脚本中的 setAttribute 设置的,在这种情况下,事件不会被触发。

在这种情况下我能做些什么吗?

【问题讨论】:

  • 复选框和单选按钮确实会触发 onchange 事件,问题是 IE 在复选框或单选按钮失去焦点之前不会触发事件。

标签: javascript firefox dom


【解决方案1】:

请参阅:http://www.quirksmode.org/dom/events/change.html

它说所有主流浏览器都支持更改事件,但 IE 的实现是错误的。

当复选框或单选框模糊时,IE 会触发该事件,而不是在它被激活时触发。这是一个严重的错误,需要用户采取另一项操作,并根据复选框和单选框上的更改事件阻止一致的跨浏览器界面。

我认为你可以用这个技巧克服 IE 的错误。 blur() 元素聚焦时! (在 jQuery 中使用 $('input[type=radio]').focus(function(){$(this).blur();}); 之类的东西或使用纯 javascript)

【讨论】:

  • 不会触发两次模糊事件吗?
  • IE 的行为不是错误,它符合 W3C HTML 规范。解决方法是对单选按钮和复选框使用 click 事件,因为当它们改变状态时会触发 click 事件。
【解决方案2】:

好的,经过一番挖掘,这就是我发现的。请注意,这适用于 Firefox,并且可能仅适用于 Firefox。由于在这种情况下我正在处理内部应用程序,这对我来说已经足够了。

因此,基本上,为了可靠检测 Firefox 中复选框/单选按钮状态的变化,您需要做两件事:

  1. 分别为复选框和单选按钮设置自定义 Firefox 的事件处理程序CheckboxStateChange and RadioStateChange。这些事件将在用户更改输入或通过脚本修改输入时触发,使用setAttribute,但是,当脚本中的状态更改时,使用checkedselected 属性不会触发这些事件在这些元素中,这就是为什么我们需要...
  2. 使用Object.watch 观察checked 属性的变化

标准的onchange 事件不好,因为它只在用户直接更改值时触发。

妈的,这东西坏了……

如果有人感兴趣,我会发布一些代码。

【讨论】:

    猜你喜欢
    • 2015-12-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-22
    • 1970-01-01
    • 1970-01-01
    • 2013-09-20
    • 1970-01-01
    相关资源
    最近更新 更多