Question

我有一张表，其中一个td单元格有一个input type=text字段。表中的每一行都是这样的：

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

我在这里发现的问题是这个代码很可能是针对具有单个输入文本框的应用程序。我有几行，每行有一行，当需要修改特定行中的分钟值时，我需要运行一些代码。

无论如何，我可以让我的表格中的所有文本框都能正常工作吗？

Answer 1

您需要某种方法将超时与特定输入相关联。一种方便的方法是使用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");
}

另外，作为旁注，我根本不需要keydown处理程序。您可以使用一个处理程序（keyup或keydown）来完成所有这些操作。

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

从评论更新：如果您需要知道哪些输入已“完成”，您可以使用$.proxy创建一个this值为input的值的函数：< / p>

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" */
}

Answer 2

需要循环并将定时器设置为闭包的内部，以便它们在每个定时器上是独立的：（试图让它靠近你的代码，我所做的只是函数换行和循环）

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

jQuery：确定用户何时更改文本

2 个答案: