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

Question

3

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

该表单具有附加了onchange事件监听器的输入字段，以便我可以判断用户是否对表单进行了任何更改。其中一个字段是密码字段。

在浏览器设置为记住密码的情况下，当表单加载时，它会填充密码字段并触发我的监听器。

解决方法：

我设置了一个超时来在页面加载后重置我的dataChanged标志。这不太优雅。似乎爬取event.callee.caller堆栈不被推荐，非标准，并且不太可能区分用户和浏览器发起的事件。

问题：

有没有办法只确定用户交互（和JavaScript）引发的事件？

但我不想取消事件，我只想忽略它。

关于事件选择的澄清：

这段代码位于我们的表单处理js库中，该库用于许多应用程序。我们需要知道该字段是否实际上已更改其内容，以便在离开表单时警告用户未保存数据。它还用于触发其他相互依赖字段的重新计算。

使用onkeyup / onkeypress将在用户按下非编辑键（如Tab，cursor-arrow，Shift等）时触发。我们要避免存储加载的内容，并将其与onkeyup后的内容进行比较，以确定内容是否实际上已更改。

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

因此，我们希望坚持使用onchange作为首选事件，因为它是为我们的目的而设计的 - 当内容实际上发生更改时触发，仅在用户退出字段时触发一次。

- Peter Brand

为什么不使用 keypress、keydown、keyup 或 blur 事件？这些是实际用户操作，不应该被浏览器的自动完成功能触发。 - Mulan

问题已经进行了澄清，以解释为什么我们想要使用onchange。感谢您的建议。 - Peter Brand

2个回答

1

也许你可以在用户名和/或密码字段上设置autocomplete="off"，以防止浏览器自动填充它们。

- Maroun Baydoun

好主意，但我不想强迫他们输入密码。让浏览器自动填充密码对我来说没问题。 - Peter Brand

这并不可靠，因为一些浏览器有意忽略 autocomplete=off：https://groups.google.com/a/chromium.org/d/topic/chromium-dev/zhhj7hCip5c/discussion - Mathias Bynens

是的@MarounBaydoun，他们确实可以更改密码。这是一个表单，供他们更改“个人资料”；姓名、用户代码、密码等。 - Peter Brand

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cнŝdk · Accepted Answer

您可以简单地使用onkeyup来处理这个问题：

例如：

HTML：

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

JS：

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

希望这样就可以解决问题了。

编辑：

为了解决您在编辑中提出的所有问题，您可以使用onfocus而不是onkeyup，并仅在用户聚焦input时附加onchange侦听器，这样浏览器自动填充操作将不再计数。

只需在输入框中将onkeyup更改为onfocus：

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

注意：

这种方法仅避免了在窗口加载时触发的第一个浏览器onchange事件。