私は、Webアプリケーションのテキスト入力フィールドにユーザーが入力したときにイベントをキャッチする方法を知りました。ユーザーがテキスト入力を入力したときにhtml catchイベントが発生する
シナリオは、連絡先リストグリッドがあります。フォームの上部には、ユーザーが検索しようとしている連絡先の名前を入力できます。テキスト入力に1文字以上が入力されたら、ユーザーが入力した文字を含む連絡先をシステム内で検索したいと考えています。彼らが入力し続けると、データが変更されます。
すべては実際には単純なタイプの先行型機能（またはオートコンプリート）ですが、別のコントロールでデータを消したいと思います。
入力がフォーカスの細かい部分を失った場合、テキストを入力から取り出すことができますが、これは状況には合いません。
アイデア？
おかげ
は、ユーザーの種類として値をキャプチャし、それはあなたがその値を検索するために何であるものは何でもするからkeyupイベントを使用します。
$('input').on('keyup', function() {
if (this.value.length > 1) {
// do search for this.value here
}
});
別のオプションは、inputイベントとなり、キーから入力を受け取り、貼り付けることができます。
マウスでカット/ペーストすると、キーアップは起動しませんが、入力値が変わることに注意してください。重要な場合は、イベントに「カットペースト」を追加することもできます。 –
キーを入力してすぐにタブを押して次のコントロールに移動すると、キーアップは必ずしも発生しないことに注意してください。あなたが "ぼかし"をキャッチすると、このケースを処理します。このイベントをここに追加すると、入力をクリックするたびに検索が実行されます。 –
@CurtisYallop - 質問には、「ユーザーが入力したときに*」と書かれていますが、値の変更をすべてキャッチしたい場合は、 'input'イベントがそれを行います。 – adeneo
私は 'input'と 'propertychange'というイベントを使用します。彼らはまた、マウスを使って切り取りと貼り付けを開始します。
また、速いタイピストが多くのDOMリフレッシュによってペナルティを科されないように、debouncingイベントハンドラを検討してください。
は私の試みを参照してください。
あなたはすべての.input授業後.combo置く必要があります。
.inputは、テキストボックスと.comboはdivのイベントoninput HTMLを使用しないのはなぜ
$(".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();
});
あるのですか？
<input type="text" oninput="searchContacts()">
[keyupイベント]（https://developer.mozilla.org/en-US/docs/DOM/element.onkeyup）を使用してください。 – nnnnnn