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 回答