Javascript: Xử lý khi người dùng đã ngừng nhập

Question

Tôi có một hộp văn bản trên trang web có giá trị mà tôi muốn gửi đến XMLHttpRequest. Bây giờ tôi muốn người dùng chỉ cần nhập giá trị mà không cần nhấn nút. Nhưng nếu tôi chỉ gửi yêu cầu int ông bàn phím sự kiện, nó sẽ cháy mỗi khi một phím được nhấn.

Vì vậy, về cơ bản tôi muốn một cái gì đó liek này

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

Nó sẽ là tuyệt vời nếu các giải pháp có thể đến từ đồng bằng javascript hoặc mootools. Tôi không muốn sử dụng bất kỳ thư viện nào khác.

Answer 1

Cách thức này thường được thực hiện bằng cách khởi động lại bộ hẹn giờ trên sự kiện keyup. Một cái gì đó như thế này:

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"); 
} 

Answer 2

Về cơ bản, bạn muốn bắt đầu bộ hẹn giờ trên KeyUp và khi KeyUp khởi động lại, hãy đặt lại bộ hẹn giờ. Khi người dùng ngừng nhập, bộ hẹn giờ sẽ hết và yêu cầu của bạn có thể đi vào thời điểm đó.

Ví dụ:

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); 
} 

Chỉ cần đính kèm các chức năng để đầu vào sử dụng phương pháp ưa thích của bạn, và thay thế alert với hành động ưa thích của bạn.

Tất nhiên có nhiều cách bạn có thể khái quát hóa cách tiếp cận này và làm cho nó có thể sử dụng lại nhiều hơn, v.v. Nhưng tôi nghĩ điều này minh họa ý tưởng cơ bản.

Answer 3

Bạn không bao giờ biết khi nào người dùng thực sự gõ "xong". Người dùng có thể nghỉ ngơi hắt hơi hoặc nghỉ ngơi hoặc nghỉ giải lao và sau đó tiếp tục nhập.

Tuy nhiên, nếu bạn đang triển khai một cái gì đó như cơ chế tự động hoàn thành, bạn có thể đặt hẹn giờ (xem window.setTimeout(...)) để xem liệu người dùng chưa nhập bất kỳ thứ gì trong một khoảng thời gian nhất định. Nếu bạn nhận được một sự kiện quan trọng khác trong khi bộ hẹn giờ đang chạy, bạn có thể khởi động bộ hẹn giờ.

Answer 4

Sử dụng onBlur và có thể onKeyDown để kiểm tra người dùng nhấn phím trả về/enter.

Answer 5

tôi luôn luôn sử dụng chức năng đơn giản này để xử lý một giờ, mà sẽ cháy một chức năng gọi lại, sau khi người dùng đã ngừng gõ trong một khoảng thời gian nhất định:

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

sử dụng (ví dụ với MooTools):

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

sự khác biệt chính giữa giải pháp này và các giải pháp từ câu trả lời khác là tất cả bộ đếm thời gian logic được xử lý bởi các typewatch chức năng riêng của mình, xử lý sự kiện không cần phải biết một nything về bộ đếm thời gian, nó chỉ gọi hàm. Ngoài ra, không có biến toàn cục nào cần lưu ý (id hẹn giờ là không phải được lưu trữ trên biến toàn cầu).

Answer 6

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

EDIT: Chết tiệt ninja

Answer 7

Tôi đã viết một sự kiện jQuery tùy chỉnh vì tôi sử dụng logic này rất nhiều:

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); 
    } 
}; 

Bạn có thể sử dụng nó như thế này:

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

Đối với một số lý do tôi không bao giờ có thể làm cho nó hoạt động với .live (...). Tôi không chắc tại sao ...