3

次のような onchange イベントが添付されている標準のブートストラップ typeahead 要素には、いくつかの問題があります。

<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 キーを押すと、ユーザーは次のフィールドに移動します。ただし、このように動作するのには十分な理由があるのではないでしょうか? 誰か知っていますか？

2) jquery onchange イベントをアタッチすると、firefox で 2 回発生します (chrome や IE では発生しません)。なぜこうなった？次の段落の手順に従って、次の jsfiddle でテストできます: http://jsfiddle.net/e4zDx/4/

最初の入力フィールドに「a」と入力し始め、Tab キーを押します。フィールドはオートコンプリートされ、onchange イベントが発生し、カーソルは悲しいことに入力フィールドに残ります (これは問題 1 でした)。タブをもう一度押すと、カーソルが次のフィールドに移動します。この時点で、jsfiddle の出力 div で示されているように、Firefox (Chrome や IE ではない) が onchange イベントを再度発生させます。

onchange イベント内で現在の値を取得し、それを data-oldvalue などの要素の属性に格納して、現在の値が古い値と異なる場合にのみ onchange を実行できることはわかっています。しかし、私が本当に知りたいのは、Firefox が onchange イベントを 2 回トリガーしているのに、chrome と ie がトリガーされていない理由です。

Windows 7 を使用しており、使用しているブラウザーのバージョンは次のとおりです。
Firefox 18.0
Chrome 23.0.1271.97 m
IE 8 (ブラウザー モード IE8、ドキュメント モード IE8 標準)

4

1 に答える 1

0

問題1：最初のタブではTypeaheadがオートコンプリートされ、2番目のタブではカーソルが次のフィールドに移動するため、問題はないと思います。私の場合のように、Typeahead complete で ajax リクエストをトリガーし、フォームの一部のフィールドを更新しました。ユーザーが選択を変更したい場合、ユーザーは前の選択を削除して新しい値を試すことができるので、同じフィールドにカーソルを置くと思います。

問題 2: Chrome 24.0.1 と Firefox 16.0.1 で Js フィドルを試してみましたが、どちらの場合も 1 つのイベントしか発生しませんでした。Firefox のバージョンに問題がある可能性があります。

于 2013-03-08T13:48:06.760 に答える