javascript - 为什么在使用 .focus() 时我的 onchange 函数被调用了两次？

Question

TLDR

• 检查这个example在 Chrome 。
• 键入 someting 并按 tab。看到一个新盒子出现
• 键入内容并按 enter。看到两个新的框出现，其中一个是预期的。

简介
我注意到当使用 enter 而不是 tab 更改字段时，我在输入字段上的 onchange 函数触发了两次。这个页面相当大，并且仍在开发中(阅读:许多其他错误)，所以我做了一个最小的例子来展示这种行为，在这种情况下，它甚至在“选项卡”上进行。据我所知，这只是 Chrome 中的一个问题。

它应该做什么
在输入字段中输入内容后，我想进行新的输入。该字段应该得到关注。

示例:

javascript - 需要 jquery

function myOnChange(context,curNum){
      alert('onchange start');
      nextNum = curNum+1;
      $(context.parentNode).append('<input type="text" onchange="return myOnChange(this,'+nextNum+')" id="prefix_'+nextNum+'" >');
      $('#prefix_'+nextNum).focus();
      return false;
}

HTML 部分

<div>
    <input type="text" onchange="return myOnChange(this,1);" id="prefix_1">
</div>

完整代码为 on pastebin .你需要在脚本中添加你的 jquery 路径

jFiddle 上有一个工作示例

onchange 被调用两次:myOnChange 函数被调用，进行新的输入，调用 focus()，myOnChange 得到再次调用，进行新输入，“内部”myOnChange 退出，然后“外部”myOnchange 退出。

我假设这是因为焦点改变触发了 onchange()?。我知道浏览器之间的行为存在一些差异。

我想停止 .focus()(这似乎是问题所在)不调用 onchange()，所以 myOnChange() 不会被叫两次。有人知道怎么做吗？

Answer 1

有一种更简单、更合理的解决方案。正如您预期的那样，当输入值更改时会触发 onchange，您可以简单地显式检查它是否确实已更改。

function onChangeHandler(e){
  if(this.value==this.oldvalue)return; //not changed really
  this.oldvalue=this.value;
  // .... your stuff
}