javascript - jQuery:确定用户何时完成更改文本

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 值是输入:

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