4

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

しかし今の問題は、ユーザーが最後のフィールドにとどまり、最初にテキストボックスを離れることなく、マウスを取り、(別のフォームの) OK ボタンを押すことです。変更イベントはトリガーされず、古い不適切な値が次のページに渡されます。

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

私は車輪を再発明するつもりはなく、そのような機能がどこかで利用できるかどうか疑問に思っていました.
提案？

4

3 に答える 3

6

同様の問題があり、内部アプリケーションで現在使用されている jQuery プラグインを作成しました。ユーザーが入力を完了した後、変更イベントをトリガーする必要があります。

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!
});
于 2009-06-24T09:44:26.503 に答える
0

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

ユーザーが入力するのに十分な時間を与えるために、キーストロークごとにカウントダウンも再開するでしょう。

于 2009-06-24T09:23:16.233 に答える
0

onBlur を実行しても機能しないので、ユーザーが次のフィールドに移動したり、他の何かをクリックしたりすると、値が保存されますか?

于 2009-06-24T09:24:10.723 に答える