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')

输入类型=＆＃34;数字＆＃34;

1 个答案: