jQuery：確定用戶何時更改文本

我有一個表格，其中一個td單元格有input type=text字段。表中的每一行都有這樣的事情：jQuery：確定用戶何時更改文本

<td class="expected_minutes"> 
    <input id="minutes-980" class="minutes" type="text" value="39" name="minutes-980"> 
</td>

現在我想要做的是改變的價值在另一個單元格，如果用戶更改這個特殊的價值。當用戶完成文本更改時，不一定必須完成。只要文本框中的值完全改變 - 無論哪種工作最好，都可以。下面是一些代碼，我發現SO讓我開始：

//setup before functions 
    var typingTimer;    //timer identifier 
    var doneTypingInterval = 2000; //time in ms 

    //on keyup, start the countdown 
    $('.minutes').keyup(function(){ 
     clearTimeout(typingTimer); 
     typingTimer = setTimeout(doneTyping, doneTypingInterval); 
    }); 

    //on keydown, clear the countdown 
    $('.minutes').keydown(function(){ 
     clearTimeout(typingTimer); 
    }); 

    //user is "finished typing," do something 
    function doneTyping() { 
     console.log("DONE TYPING"); 
    }

我發現這裏的問題是這樣的代碼是最有可能的目標有一個輸入文本框的應用程序。我有幾行，每行都有一行，當特定行中的分鐘值被修改時，我需要運行一些代碼。

是否有無論如何我可以使我的表中的所有文本框的這項工作？

來源

2014-02-27 randombits

您需要某種方式將超時與特定輸入相關聯。這樣做的一種便捷的方式將使用jQuery的.data功能：

var doneTypingInterval = 2000; //time in ms 

//on keyup, start the countdown 
$('.minutes').keyup(function(){ 
    var typingTimer = $(this).data('timer'); 
    clearTimeout(typingTimer); 

    typingTimer = setTimeout(doneTyping, doneTypingInterval); 

    $(this).data('timer', typingTimer); 
}); 

//on keydown, clear the countdown 
$('.minutes').keydown(function(){ 
    clearTimeout($(this).data('timer')); 
}); 

//user is "finished typing," do something 
function doneTyping() { 
    console.log("DONE TYPING"); 
}

此外，作爲旁註，我實在看不出對處理程序在所有的需要。你可以用一個處理程序完成所有這些操作（在keyup或）。

例子：http://jsfiddle.net/RkWH5/

從評論更新：如果你需要知道哪個輸入是「做」，你可以使用$.proxy創建其this值爲input的值的函數：

var doneTypingInterval = 2000; //time in ms 

$('.minutes').keydown(function() { 
    var typingTimer = $(this).data('timer'); 

    clearTimeout(typingTimer); 

    typingTimer = setTimeout($.proxy(doneTyping, this), doneTypingInterval); 

    $(this).data('timer', typingTimer); 
}); 

function doneTyping() { 
    /* `this` is the element that the user is done typing in. */ 
    $(this).css('color', 'red'); 
}

如果你不想使用this，你可以一個參數傳遞給doneTyping這樣說：

var doneTypingInterval = 2000; //time in ms 

//on keyup, start the countdown 
$('.minutes').keydown(function() { 
    var typingTimer = $(this).data('timer') 
     , el = this; 

    clearTimeout(typingTimer); 

    typingTimer = setTimeout(function() { 
     doneTyping(el); 
    }, doneTypingInterval); 

    $(this).data('timer', typingTimer); 
}); 

//user is "finished typing," do something 
function doneTyping(el) { 
    /* do something with "el" */ 
}

來源

2014-02-27 21:08:11

是否也可以將參數傳遞給doneTyping，以便知道哪個文本框受到影響？我沒有問原來的問題，無論如何這都是正確的答案。 – randombits

@randombits：是的，事實上這就是Jsfiddle發生的事情:)。我也更新了答案。 –

需要循環和定時器內部設置爲關閉所以他們依賴於每一個：（試圖保持它接近你的代碼，我所做的就是功能包和循環）

var typeTimingSingle = function(elem){ 
//setup before functions 
var typingTimer;    //timer identifier 
var doneTypingInterval = 2000; //time in ms 

//on keyup, start the countdown 
$(elem).keyup(function(){ 
    clearTimeout(typingTimer); 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
}); 

//on keydown, clear the countdown 
$(elem).keydown(function(){ 
    clearTimeout(typingTimer); 
}); 

//user is "finished typing," do something 
function doneTyping() { 
    console.log("DONE TYPING"); 
} 
}; 

$('.minutes').forEach(typeTimingSingle); // Use any loop needed

來源

2014-02-27 21:09:06

jQuery：確定用戶何時更改文本

回答

相關問題