web-dev-qa-db-ja.com

ユーザーがテキスト入力を入力しているときのHTMLキャッチイベント

ユーザーがWebアプリケーションのテキスト入力フィールドに入力しているときに、イベントをキャッチするにはどうすればよいかと思います。

シナリオは、連絡先リストグリッドです。フォームの上部で、ユーザーは探している連絡先の名前を入力できます。テキスト入力に複数の文字が含まれている場合、ユーザーが入力した文字を含むシステム内の連絡先の検索を開始したいと思います。彼らがデータの変更を入力し続けると。

それはすべて、単純な型先行型機能（またはオートコンプリート）ですが、別のコントロールでデータを起動したいと思います。

入力がうまくフォーカスを失ったら、入力からテキストを取り出すことができますが、これは状況に適合しません。

何か案は？

ありがとう

javascriptjqueryhtmlinputtypeahead
17
Matt

Keyupイベントを使用して、ユーザーが入力する値をキャプチャし、その値を検索するために何をするかを実行します。

$('input').on('keyup', function() {
     if (this.value.length > 1) {
          // do search for this.value here
     }
});

別のオプションはinputイベントで、キー、貼り付けなどからの入力をキャッチします。

20
adeneo

HTML oninputイベントを使用しないのはなぜですか？

<input type="text" oninput="searchContacts()">
12
Hiram A

' input 'および ' propertychange 'イベントを使用します。彼らは同様にマウスを介してカットアンドペーストで発砲します。

また、多くのDOM更新によって高速タイピストが不利益を被らないように、イベントハンドラー debouncing を検討してください。

6
syazdani

私の試みを見てください：

すべての.inputクラスの後に.comboを配置する必要があります。

.inputはテキストボックスで、.comboはdivです

$(".input").keyup(function(){
    var val = this.value;
    if (val.length > 1) {
        //you search method...
    }
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});

$(".input").blur(function(){
    $(this).next(".combo").hide();
});
0
Poya Eraghi