Question

我遇到了一些标准bootstrap typeahead元素的问题，它有一个附加的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键，则预先输入typeahead，但不会将用户移动到下一个输入字段。我认为这种行为是错误的。标签应该将用户带到下一个字段。但是，也许有一个很好的理由说明它为什么会这样？有谁知道吗？

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

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

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

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

Answer 1

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

问题2：我试过你在Chrome 24.0.1和firefox 16.0.1上使用Js小提琴并在两种情况下只发射1个事件，可能是你的firefox版本有一些问题。

Bootstrap typeahead选项卡完成

1 个答案: