如何确定浏览器触发的onChange事件

时间:2015-05-11 06:34:30

标签: javascript forms browser onchange

情况:我有一个表单供用户更改其个人资料。

表单包含为onchange事件附加事件侦听器的输入字段,因此我可以判断用户是否对表单进行了任何更改。其中一个字段是密码字段。

如果浏览器设置为记住密码,则在加载表单时,它会填写密码字段并触发我的监听器。

解决方法:

我已设置超时以在页面加载后重置dataChanged标志。不是很优雅。似乎不建议抓取event.callee.caller堆栈,非标准,并且不太可能区分用户和浏览器启动的事件。

问题:

有没有办法可以确定用户交互(和javascript)触发的事件?

我不想取消该事件,我只想忽略它。

澄清事件的选择:

此代码位于我们的表单处理js库中,用于众多应用程序。我们需要知道该字段是否实际更改了其内容,以便我们可以警告用户离开表单时数据尚未保存。它还用于触发重新计算其他共同依赖的字段。

使用onkeyup / onkeypress将在用户按下Tab,光标箭头,Shift等非编辑键时触发。我们希望避免将内容存储为已加载,并将其与onkeyup后的内容进行比较以确定是否内容实际上已经改变了。

浏览器还会捕获用户编辑字段,改变主意并按ESC或CTRL-Z的条件 - 不会触发onchange。在此过程中,事件onkeypress会多次触发。

因此,我们希望坚持onchange作为选择事件,因为它是为我们的目的设计的 - 当内容实际发生变化时触发,只有当用户退出该字段时才会触发。

2 个答案:

答案 0 :(得分:1)

也许你可以在用户名和/或密码字段设置autocomplete =“off”来阻止浏览器自动填充它们

答案 1 :(得分:1)

您只需使用onkeyup来处理此问题:

  1. 在加载窗口时,您不需要将事件附加到窗口 onchange字段,以便浏览器自动填充。
  2. 并且onkeyup字段会将事件附加到onchange onchange事件仅在用户真正更改时才会触发 这个字段值。
  3. 例如:

    <强> HTML:

    <input type="password" onkeyup="giveOnchangeEvent(this)"/>
    

    JS:

     function giveOnchangeEvent(input) {
        input.onchange = function() {
          //give the actions you need to do here
        }
     }
    

    这应该可以解决问题。

    编辑:

    要解决您的编辑中陈述的所有问题,您可以使用onfocus代替onkeyup并仅附加onchange侦听器,并且只有在input关注时才会用户,这样浏览器自动填充操作将不再计算。

    只需在输入中更改onkeyup onfocus

    <input type="password" onfocus="giveOnchangeEvent(this)"/>
    

    注意:

    此方法避免窗口加载时触发的第一个onchange(浏览器)。