非アクティブなキーボードがxミリ秒後に自動送信フォーム
-
10-07-2019 - |
質問
フォームには、ユーザーが値を入力できる入力ボックスのセットがあります。 これらのボックスのいずれかを変更すると、フォームが自動的に送信されます。
ただし、問題は、ユーザーが最後のフィールドに留まり、マウスを使用して、最初にテキストボックスを離れずに(別のフォームの)OKボタンを押すことです。変更イベントはトリガーされず、古い誤った値が次のページに渡されます。
非アクティブなキーボードの数ミリ秒後にonchangeイベントをトリガーしたい。ほとんどのオートコンプリートプラグインと同じように。
入力フィールドに入力した瞬間に計時を開始し、キーストロークが処理されるたびにリセットされ、ゼロに達するとonchangeイベントがトリガーされるタイマーを実装できると思います。
私は車輪を再発明するつもりはありません。そのような機能がどこかで利用できるかどうか疑問に思っていました。
提案?
解決
同様の問題があり、現在内部アプリケーションで使用されているjQueryプラグインを作成しました。ユーザーが入力を完了した後にchangeイベントをトリガーする必要があります。
jQueryを使用していない場合でも、コードは他のものに適応できます。
jQuery.fn.handleKeyboardChange = function(nDelay)
{
// Utility function to test if a keyboard event should be ignored
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, // Arrows
91:true, 92:true, 93:true // Windows keys
};
return mapIgnoredKeys[event.which];
}
// Utility function to fire OUR change event if the value was actually changed
function fireChange($element)
{
if( $element.val() != jQuery.data($element[0], "valueLast") )
{
jQuery.data($element[0], "valueLast", $element.val())
$element.trigger("change");
}
}
// The currently running timeout,
// will be accessed with closures
var timeout = 0;
// Utility function to cancel a previously set timeout
function clearPreviousTimeout()
{
if( timeout )
{
clearTimeout(timeout);
}
}
return this
.keydown(function(event)
{
if( shouldIgnore(event) ) return;
// User pressed a key, stop the timeout for now
clearPreviousTimeout();
return null;
})
.keyup(function(event)
{
if( shouldIgnore(event) ) return;
// Start a timeout to fire our event after some time of inactivity
// Eventually cancel a previously running timeout
clearPreviousTimeout();
var $self = $(this);
timeout = setTimeout(function(){ fireChange($self) }, nDelay);
})
.change(function()
{
// Fire a change
// Use our function instead of just firing the event
// Because we want to check if value really changed since
// our previous event.
// This is for when the browser fires the change event
// though we already fired the event because of the timeout
fireChange($(this));
})
;
}
使用法:
$("#my_input").handleKeyboardChange(300).change(function()
{
// value has changed!
});
他のヒント
onBlurを実行しても機能しないので、ユーザーが次のフィールドに移動するか、他のフィールドをクリックすると、値が保存されますか?
そのようなソリューションが「再発明」とみなされるかどうかはわかりません。何でも。あなたが言ったように、ページがロードされると、単なるsetTimeoutに過ぎないように聞こえます。約3,000ミリ秒後に、form.submit()を実行します。
ユーザーが入力するのに十分な時間を与えるために、おそらく各キーストロークでカウントダウンを再開します。