输入类型="数字"的jQuery

Question

简单的问题,但我正在寻找正确的方法来处理这个问题.

我把它分解为仍然显示问题的最简单的例子.

假设我有一个基本的HTML表格:

<table id="customerTable">
    <caption class="bg-primary h4">Customer Overview</caption>
    <thead>
        <tr>
            <th>Customer ID</th>
            <th>Customer Name</th>
            <th># Projects</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Enterprise Management</td>
            <td>14</td>
        </tr>
        <tr>
            etc ...
        </tr>
    </tbody>
</table>

然后我有一个输入类型:

<input id="colorColumnRed" type="number" />

jQuery如下,redText基本的CSS将颜色更改为红色.我同时处理的change和keyup事件,以试图捕捉两种情况.

$(function () {

   $('#colorColumnRed').bind('change keyup', function () {
        var colId = $('#colorColumnRed').val();
        $('#customerTable td:nth-child(' + colId + ')').toggleClass('redText');
    });

});

问题是,当用户在数字字段中键入数字时,它按预期工作.但是,如果他们然后将焦点更改为另一个输入,则CSS 将恢复.

如果他们使用数字向上/向下选择器,则在控件失去焦点后更改仍然存在.

我在jQuery选择器中缺少什么来阻止它在失去焦点时手动输入时还原？我已经尝试了各种focus事件,blur等等,找不到改变这种行为的事件.

Answer 1

@Rayon Dabre 很快就给出了简单、快速的解决方案。

$('#colorColumnRed').bind('input')