Javascript：在用戶停止輸入時進行處理

我在網頁上有一個文本框，其值要發送到XMLHttpRequest。現在我希望用戶只需輸入值，而不必按下按鈕。但是，如果我只是將鍵盤事件發送給請求，那麼每次按下鍵時它都會觸發。Javascript：在用戶停止輸入時進行處理

所以基本上我想要的東西，這liek

function KeyUpEvent() 
{ 
    if (user is still typing) 
    return; 
    else 
    //do processing 
}

這將是巨大的，如果解決方案可能來自普通的JavaScript或mootools的。我不想使用任何其他庫。

來源

2010-03-21 Midhat

計時器永遠不會滿足。用戶可能只是分心或輸入比任何時候都慢的超時。我的解決方案是唯一合理的解決方案，並且是用戶期望與字段交互的方式，並且不需要任何按鈕。如果您不知道值的長度，則不知道用戶是否完成。那麼你就有冒險傳遞用戶不想或不期望的價值，他們的體驗只會讓你的計時器沮喪，而不是增強。談到UI體驗，您最好堅持使用標準的使用場景。 – nicerobot 2010-03-21 23:36:16

通常這樣做的方法是通過在keyup事件中重新啓動定時器。類似這樣的：

var keyupTimer; 
function keyUpEvent(){ 
    clearTimeout(keyupTimer); 
    keyupTimer = setTimeout(sendInput,1000); // will activate when the user has stopped typing for 1 second 
} 

function sendInput(){ 
    alert("Do AJAX request"); 
}

來源

2010-03-21 18:38:11 cmptrgeekken

你忘記了密碼，如果他們決定在30秒內再次打字，該怎麼辦？您的活動仍然會觸發 – 2011-03-26 02:56:46

這不是一個有效的答案，會觸發該事件[輸入的字符數]次數 – 2014-02-19 10:17:07

基本上，你想在KeyUp上啓動一個定時器，當KeyUp再次啓動時，重置定時器。當用戶停止輸入時，計時器用完，並且您的請求可以在該點進行。

實施例：

var timout_id; 

function keyup_handler(event) { 
    if (timout_id) { 
    clearTimeout(timout_id); 
    } 

    timout_id = setTimeout(function(){ 
    alert('sending data: \n' + event.target.value) 
    }, 800); 
}

功能僅附加在使用優選的方法的輸入端，並與您的優選動作更換alert。

當然有很多方法可以概括這種方法並使其更加可重用等，但我認爲這說明了基本思想。

來源

2010-03-21 18:37:29

你永遠不知道用戶何時真的「完成」輸入。用戶可能會打噴嚏，休息或咖啡休息，然後繼續打字。然而，如果你正在實現類似於自動完成機制的東西，你可以設置一個計時器（參見window.setTimeout(...)），以查看用戶是否在一段時間內沒有鍵入任何東西。如果在定時器運行時又遇到另一個按鍵事件，則可以啓動定時器。

來源

2010-03-21 18:38:43 Will

-1

使用onBlur或者onKeyDown來檢查用戶是否按下了回車/回車鍵。

來源

2010-03-21 18:38:48 nicerobot

認真！！當它是唯一一個知道用戶完成輸入的真正手段時，向下投票？！也就是說，他們已經離開了現場，或者按下了一個表示他們想要提交的鍵。否則，無法知道。不是計時器，因爲他們可能只是分心。 – nicerobot 2010-03-21 23:29:30

我一直用這個簡單的函數來處理一個計時器，將觸發一個回調函數，用戶已經停止打字指定的時間量後：

var typewatch = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
    clearTimeout (timer); 
    timer = setTimeout(callback, ms); 
    } 
})();

使用（例如通過MooTools）：

$('textInput').addEvent('keyup', function(e){ 
    typewatch(function() { 
    // executed only 500 ms after the last keyup event 
    // make Ajax request 
    }, 500); 
});

這個解決方案和解決方案等答案之間的主要區別在於：所有定時器邏輯由typewatch功能本身處理，事件處理程序並不需要知道關於計時器的事情，它只是調用該函數。此外，沒有全局變量需要注意（定時器ID爲而不是存儲在全局變量中）。

來源

2010-03-21 18:46:56 CMS

var keyTimer; 
function onKeyUp(){ 
clearTimeout(keyTimer); 
setTimeout(stoppedTyping,1500); 
} 
function stoppedTyping(){ 
// Profit! $$$ 
}

編輯：該死的忍者

來源

2010-03-21 18:48:06

我寫了一個自定義的jQuery的事件，因爲我用這個邏輯有很多：

jQuery.event.special.stoppedtyping = { 
    setup: function(data, namespaces) { 
    jQuery(this).bind('keyup', jQuery.event.special.stoppedtyping.keyuphandler); 
    }, 
    teardown: function(namespaces) { 
    jQuery(this).bind('keyup', jQuery.event.special.stoppedtyping.keyuphandler); 
    }, 
    keyuphandler: function(e) { 
    var interval = 1000; 
    var el = this; 

    if (jQuery.data(this, 'checklastkeypress') != null) { 
     clearTimeout(jQuery.data(this, 'checklastkeypress')); 
    } 

    var id = setTimeout(function() { 
     jQuery(el).trigger('stoppedtyping'); 
    }, interval); 
    jQuery.data(this, 'checklastkeypress', id); 
    } 
};

您可以使用它像這樣：

$('input.title').bind('stoppedtyping', function() { 
    // run some ajax save operation 
});

出於某種原因，我永遠無法使它與.live（...）一起工作。我不知道爲什麼......

來源

2010-08-14 01:45:58

Javascript：在用戶停止輸入時進行處理

回答

相關問題