2012-06-15 7 views
9

私は、ユーザーが入力するとすぐにテキストボックスコントロールの各変更時に関数を実行したいと思います。ほとんどの場合、イベント.keyup()は問題ありません。jQueryイベントは、テキストボックス上で提案された項目を選択すると発生しますか?

ただし、ChromeやFirefoxなどのブラウザでは、(入力コントロールの@nameや@idが分かっているため)テキストボックスコントロールの自動補完エントリを表示することがあります。

残念ながら、「提案されたエントリをクリックしたときに、以下のいずれかのイベントが発生することはありません。できるだけ

$('input#email') 
    .click(function() { console.log('click'); }) 
    .keyup(function() { console.log('keyup'); }) 
    .keydown(function() { console.log('keydown'); }) 
    .change(function() { console.log('change'); }) 
    .focus(function() { console.log('focus'); }) 
    .blur(function() { console.log('blur'); }); 

同じくらい(キーボードで選択.keyup()火災が)、私はsetInterval()定期的なチェックを使用しないようにしたいと思います。

この「選択候補」イベントを検出する方法はありますか?

答えて

8

バインドpropertychangeイベント離れた場所でクリックする必要はないように思われる:

$('input').bind('input propertychange', function() { 

    var input = this.value.trim(); 
    [...] 

}); 
+2

素晴らしい!ありがとうございます(このプロジェクトから少し離れていても)。私はそれが提案されたエントリを(要求された通りに)クリックすると起動するが、キーボードでそれを選択すると起動しないことに注意する。イベントハンドラを_keyup_でも登録すると、このギャップを埋めることができます。 – Myobis

5

短い答えはいいえ、提案選択を検出するイベントはありません。 DOM変異観察者を見ることができますが、これらの属性が変更されているかどうかは不明ですが、これまでのところこのAPIをほとんどサポートしていません。

このケースを本当に処理する必要がある場合は、setIntervalが唯一の選択肢だと思います。

編集:3年後、新しい受け入れられた回答のようにpropertychangeをjQueryと使用することができます(私は、フードの下で突然変異観測を使用すると仮定します)。

+0

私の調査はこの結論に収束しているようです。あなたのご意見ありがとうございます。 – Myobis

+0

'setInterval'以外にも、フィールド/テキストエリアにフォーカスがあるときを検出し、現在の値をコピーしてフォーカスを失った後にその値と比較するというより明確なアプローチがあると思います。欠点は、フィールドがフォーカスを失った後に変更されたことだけを知ることです。しかし、これを克服する簡単な方法は、今説明しただけでなく、 'change'リスナを実装することです。 –

0

変更イベントが正常に動作しますが、

2

代替ソリューションは

のKeyDownなど、オートコンプリートを無効にしてからkeyupなどの他のイベントを処理
<input type="text" name="foo" autocomplete="off" /> 
関連する問題