4


3

私のフォームには、ユーザーが値を入力できる一連の入力ボックスがあります。 これらのボックスの1つが変更されると、フォームは自動的に送信されます。

ただし、問題は、ユーザーが最後のフィールドに留まり、マウスを移動して、最初にテキストボックスを離れることなく(別の形式の)OKボタンを押すことです。 changeイベントは発生せず、古い不正な値が次のページに渡されます。

数ミリ秒の非アクティブキーボードの後に​​onchangeイベントをトリガーしたい。 ほとんどのオートコンプリートプラグインと同じように。 入力フィールドに入った瞬間に計時を開始し、キーストロークが処理されるたびにリセットされ、その後ゼロに達するとonchangeイベントがトリガーされるタイマーを実装できると思います。

私は車輪を作り直すつもりはないし、そのような機能がどこかで利用可能かどうか疑問に思いました。 提案?

3 Answer


6


私は同様の問題を抱えており、現在内部アプリケーションで使用されているjQueryプラグインを作成しました。 ユーザーによる入力が完了した後で、changeイベントが発生します。

あなたがjQueryを使用していないのであれば、コードは他の何かにまだ適応可能です。

jQuery.fn.handleKeyboardChange = function(nDelay){//キーボードイベントを無視するかどうかを調べるユーティリティ機能function shouldIgnore(event){var mapIgnoredKeys = {9:true、// Tab 16:true、17:true、18 :true、// Shift、Alt、Ctrl 37:true、38:true、39:true、40:true、//矢印91:true、92:true、93:true // Windowsのキー}; mapIgnoredKeys [event.which]を返します。 }

//実際に値が変更された場合にchangeイベントを発生させるためのユーティリティ関数。 data($ element [0]、 "valueLast"、$ element.val())$ element.trigger( "change"); }}

//現在実行中のタイムアウト。//クロージャでアクセスされます。var timeout = 0;

//以前に設定されたタイムアウト機能をキャンセルするためのユーティリティ関数。clearPreviousTimeout(){if(timeout){clearTimeout(timeout);} }}

.keydown(function(event){if(shouldIgnore(event))return; //ユーザーがキーを押し、タイムアウトを停止します。clearPreviousTimeout(); return null;}).keyup(function(event){if( shouldIgnore(event))return; //しばらく時間が経過した後にイベントを発生させるためにタイムアウトを開始する//最後に以前に実行されたタイムアウトをキャンセルするfireChange($ self)}、nDelay);}).change(function(){//イベントを発生させるのではなく、//関数を使用する// //値が実際に変更されたかどうかをチェックしたいので//前のイベント //これは、タイムアウトfireChange($(this))のために、//ブラウザがchangeイベントを起動したときに発生します。 ;)); }

使用法:

$( "#my_input")。handleKeyboardChange(300).change(function(){//値が変更されました。 ;));


0


そのような解決策が何かを「再発明する」と見なされることを私は知りません。 あなたが言ったように、それはページがロードされた後は単純なsetTimeoutにすぎないように思えます。 約3,000ミリ秒後、form.submit()を実行します。

ユーザーが入力するのに十分な時間を与えるために、私はおそらく各キーストロークでカウントダウンを再開するでしょう。


0


onBlurを実行しても機能しません。したがって、ユーザーが次のフィールドに移動したとき、または他のフィールドをクリックしたときの両方で、値が保存されますか?