Question

所以我知道过去曾经问过这个问题的几个变种，但我只是想知道html5和所有内容是否有任何变化。

基本上，我有基于网络的表单，它们有更改时的事件。（通过onchange，onclick等）。现在这些表单实际上将它们的值存储在javascript变量中。我意识到我这样做是不同的，我可以稍后检查字段以进行更改。但是，由于我正在构建的应用程序，必须立即发生事件。

我遇到的问题是密码管理器（我假设像roboform这样的插件）之类的东西会通过javascript更改表单字段的值。当javascript更改这些值时，它不会触发我当前使用的事件。

现在我知道IE有一个名为“propertychange”的专有功能。 Firefox也有类似的功能叫做“DOMAttrModified”（我相信现在IE9也支持它）。我相信其中的每一个都可以工作，因为我可以主动观察该字段的值，当javascript更改值时会触发此事件。然而，chrome和safari似乎都没有类似的功能。

我的主要问题是，如果我遗漏了任何可以在chrome和safari中工作的东西（不使用settimeout）？此外，是否有办法在HTML5中执行此操作？对我来说，似乎有点愚蠢，没有标准的方法来做到这一点。

最后，是否可以阻止像lastpass这样的东西实际填写你的字段。我知道你可以把autocomplete =“off”，他们应该不会填写那些字段，但这似乎不适用于lastpass。

Answer 1

Firefox有一个非标准Object.watch()方法，可让您知道何时从JavaScript更改属性 - 请参阅https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch。据我所知，由于性能影响，没有其他浏览器选择实现它。

对于Chrome，我认为你运气不好 - 他们甚至选择不实施DOM突变事件来获得更好的性能分数。你只能求助于那里的民意调查 - 例如每100毫秒检查一次该值是否有变化。 Safari支持DOMAttrModified但在这种情况下可能不会触发（取决于密码管理器实际上是更改属性还是仅更改属性）。

Answer 2

Safari和Chrome support DOMSubtreeModified，您可以监听它，然后检查特定属性，如果该元素的DOM子树没有进行太多更改。

或者，您可以尝试使用Javascript setters（通过Object.defineProperty）。

Answer 3

也许是这样的（普通JS）

<script>

var tId=[];

window.onload=function() {
  var inputs =document.getElementsByTagName("input");
  for (var i=0, n=inputs.length;i<n;i++) {
    if (inputs[i].className.indexOf("watch") !=1) {
      inputs[i].onfocus=function() {
        var id = this.id;
        tId[id]=setInterval(
          function(){ 
            var fld = document.getElementById(id);
            if (fld.value!=fld.defaultValue) fld.onchange() 
          },100);
      }      
      inputs[i].onblur=function() {
        var id = this.id;
        clearInterval(tId[id])
      }      
    }
  }
}


</script>
<form id="form1">
<input type="text" name="field1" id="field1" value="" class="watch"/>
</form>

通过javascript更改值时的Javascript事件

3 个答案: