3

我有一个标准引导预输入元素有几个问题，它有一个附加的 onchange 事件，如下所示：

<input id="element1" />
<script type="text/javascript">
  var $element1 = $j("#element1");
  var $output = $j("#output");

  $element1.typeahead({
    "source": ["apple", "airplane", "astronaut", "balloon", "banana"],
    "items": 25
  });

  $element1.on("change", function() {
    console.log("onchange fired");
  });
</script>


问题：

1) 如果您开始输入一个值并按 Tab，则预先输入会自动完成，但用户不会移动到下一个输入字段。我认为这种行为是错误的。Tab 键应该将用户带到下一个字段。但是，也许有充分的理由说明它为什么会这样？有人知道吗？

2）如果我附加一个 jquery onchange 事件，那么它将在 firefox 中被触发两次（但不是 chrome 或 IE）。为什么会这样？您可以按照下一段中的步骤并使用此 jsfiddle 进行测试：http: //jsfiddle.net/e4zDx/4/

开始在第一个输入字段中输入“a”并按 Tab。该字段是自动完成的，触发了 onchange 事件，并且光标遗憾地保留在输入字段中（这是问题 1）。再次按 Tab 会将光标移动到下一个字段，此时 firefox（不是 chrome 或 IE）将再次触发 onchange 事件，如我在 jsfiddle 中的输出 div 所示。

我知道我可以在 onchange 事件中捕获当前值并将其存储在元素的属性中，例如 data-oldvalue 并且仅在当前值与旧值不同时才执行 onchange。但是，我真正想知道的是，为什么 firefox 会触发 onchange 事件两次，而 chrome 和 ie 却没有。

我有 Windows 7，我使用的浏览器版本是：
Firefox 18.0
Chrome 23.0.1271.97 m
IE 8（浏览器模式 IE8，文档模式 IE8 标准）

4

1 回答 1

0

问题 1：我认为这不是问题，因为在第一个选项卡上它会自动完成 Typeahead，而在第二个选项卡上，光标会转到下一个字段，因为如果您想更改选择，那么您仍然在同一个字段上进行任何更改，就像在我的情况下，我在 Typeahead 完成时触发了 ajax 请求并更新了表单中的某些字段，如果用户希望更改选择，那么用户可以删除以前的选择并尝试一些新值，所以我认为它可以将光标放在同一个字段上。

问题 2：我在 Chrome 24.0.1 和 firefox 16.0.1 上尝试过 Js fiddle，并且在这两种情况下都只触发 1 个事件，可能是你的 firefox 版本有问题。

于 2013-03-08T13:48:06.760 回答