2009-06-16 12 views
6

入力テキストタイプ(つまりテキストボックス)に問題があります。Javascript Textboxイベント

テキストボックスにonkeyupイベントで使用される関数を記述しました。行は次のようになります。

<input type='TEXT' value='abc' onkeyup='changeSomething(this);'> 

をしかし、今、私は、ユーザーが以前に入力した値から値を選択したときに、ユーザは、ドロップダウンから、以前に入力した値を選択したときに、 は、私はすべてのイベントを取得していないですという問題(に直面しています編集:私は彼がここにブラウザのオートコンプリートを参照していると信じて)。

誰にでも解決策がありますか? :)この場合

答えて

11

使用onchange代わりにonkeyup

参照:http://www.w3schools.com/jsref/event_onchange.asp

例えば

<input type='text' value='abc' onchange='changeSomething(this);' /> 

2つのこと、この

EDITを回避する:
1)オートコンプリート値は、矢印キーを使用して選択し、/タブを入力して、マウスを使用してすることができます。矢印キー/ enter.tabはonkeyupイベントを発生させますが、オートコンプリートボックスをクリックしてもonclickイベントは発生しません。
2)コンテンツが変更された場合、フォーカスが失われるとすぐにonchangeイベントが発生します。オートコンプリート値を選択してもフォーカスは失われません。

本質的に、イベントがあなたが望むように処理されることを合理的に保証する方法はないようです。

まず、すべてのキーストロークを聞く必要がありますか? 第2に、オートコンプリートをオフにしてより良いサービスを提供しますか? (例えば<input type='text' value='abc' autocomplete='off' onkeyup='changeSomething(this);' />)ここで

+1

+1の変更のため、定期的にそのポーリングソリューション要素のキーイベントは、悪名高い脆弱であり、たとえば – annakata

+0

優れた点に対するマウスベースのコピー/貼り付けを処理しません。ただし、キーボード駆動/許可インタフェースを提供している場合は、キーアップ/キー押しは非常に便利です。それ以外は...あまり役に立たない。 –

+0

私はそれを次のように見ます:それ自体のキーイベントが興味のあるものなら、キーイベントを使用します。キーイベントの*エフェクト*に興味がある場合は、別のものを使用してください。 – annakata

3

<script type="text/javascript"> 

var changeWatcher = { 
    timeout: null, 
    currentValue: '', 
    watchForChange: function(el) { 
     if(el.value != this.currentValue) { 
      this.changed(el); 
     } 
     this.timeout = setTimeout(function() { 
      changeWatcher.watchForChange(el) 
     }, 200); 
    }, 
    cancelWatchForChange: function() { 
     clearTimeout(this.timeout); 
     this.timeout = null; 
    }, 
    changed: function(el) { 
     this.currentValue = el.value; 
     // do something with the element and/or it's value 
     //console.log(el.value); 
    } 
} 

</script> 
<input type='text' value='abc' onfocus='changeWatcher.watchForChange(this)' onblur='changeWatcher.cancelWatchForChange()' onchange='changeWatcher.changed(this)' /> 
+0

私たちはイベントのいずれかを取得していないこの場合です... これは動作しません..そのために残念.. –

関連する問題