1

ユーザーがリターンキーを押したときに検索ボタンをクリックしたのと同じイベントを発生させるために keyup イベントを使用しています。検索ボタンをクリックすると、Ajax リクエストを使用して検索結果がページに読み込まれます。

呼び出しは正常に機能しますが、以前に入力ボックスにフォーカスを置いた後、Google Chrome のアドレス バーのリターン ボタンを押すと、キーアップ イベントがキャプチャされます。たとえば、ユーザーがリターンを押さずに検索クエリを入力し、代わりにGoogle Chrome のアドレス バーを使用して新しい Web ページにアクセスする場合、アドレス バーでリターンを押すと、ページと入力ボックスが必要であるにもかかわらず、keyup イベントがトリガーされると同時に、ページ内の検索が送信されます。焦点が合わなくなりました。

JavaScript

$("#search-box").on("keyup", function(event) {
   if(event.keyCode == 13){
       $("#search-submit-btn").click();
   }
});

HTML

<div class="input-append"/>
   <input id="search-box" type="text" />
   <button class="btn" id="search-submit-btn">Search</button>
</div>

また、Twitter ブートストラップを使用して入力ボックスのスタイルを設定していますが、これが問題を引き起こしているとは思いません。

このページを Firefox と Safari で問題なくテストしました。Google Chrome には keyup イベントに関する問題がありますか? これは既知の問題ですか? この問題に関する情報を見つけるのに苦労しています。

編集

keyup の代わりに keydown を使用して問題を解決したと思います。要素がまだフォーカスされているかどうかのチェックも追加しましたが、キーアップと同じ影響があるため、これが違いを生むとは思いません。

$("#search-box").on("keydown", function(event) {
    if($("#search-box").is(":focus")){
        if(event.keyCode == 13){
            $("#search-submit-btn").click();
        }
    }
});

これは私にとっては問題のない解決策のように見えますが、Google Chrome で keyup が奇妙な動作をする理由を説明していません。Google Chrome でキーアップがこのようになっている理由について誰かがこれ以上の情報を持っている場合、または私が何か間違ったことをしている場合は、非常に興味があります。

4

0 に答える 0