비활성 키보드의 x 밀리 초 후 양식을 자동 제출

Question

내 형태에는 사용자가 값을 입력 할 수있는 입력 상자 세트가 있습니다. 이 상자 중 하나를 변경하면 양식이 자동으로 제출됩니다.

그러나 이제 문제는 사용자가 마지막 필드에 머무르고 마우스를 가져 와서 텍스트 상자를 먼저 떠나지 않고 OK 버튼 (다른 양식)을 눌렀다는 것입니다. 변경 이벤트가 트리거되지 않고 기존의 잘못된 값이 다음 페이지로 전달됩니다.

몇 마일의 비활성 키보드 후에 Onchange 이벤트를 트리거하고 싶습니다. 대부분의 자동 완성 플러그인과 마찬가지로.
입력 필드에 들어가는 순간 타이머를 시작하고 키 스트로크가 처리되고 0에 도달하면 OnChange 이벤트가 트리거됩니다.

나는 바퀴를 다시 발명 할 수 없으며 그러한 기능을 어딘가에 사용할 수 있는지 궁금합니다.
제안?

Answer 1

비슷한 문제가 있었고 현재 내부 응용 프로그램에서 사용중인 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!
});

Answer 2

Onblur를 수행하는 것이 작동하지 않으므로 사용자가 다음 필드로 이동하거나 다른 것을 클릭하면 값이 저장됩니까?

Answer 3

나는 그러한 해결책이 무엇이든 "다시 발명"하는 것으로 간주 될 것임을 모른다. 당신이 말했듯이, 페이지가로드되면 간단한 설정 타임 아웃에 지나지 않습니다. 약 3,000 밀리 초 후에는 form.submit ()를 실행합니다.

아마도 각 키 스트로크마다 카운트 다운을 다시 시작하여 사용자에게 입력 할 수있는 충분한 시간을 제공 할 것입니다.