jquery跟踪更改并在输入元素

Question

如何检查值是否已更改并添加蓝色突出显示？这适用于表单元素，例如输入或复选框。

//highlight the fields that have changed 
var trackChanges = $('[class=input-]')
    .each(function{
    var checkChange = false, 
        //check if data has changed
        if ($(this).data() != $(this).val()) {
            $(this).addClass('highlight')
        } 
    }
});

Answer 1

我会使用keydown事件，因为它会在您键入时更新颜色。

$('[class^=input-]').on('keydown', function () {
    $(this).addClass('highlight');
});

.highlight {
  border: 2px solid #3377ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Name: </td>
    <td><input class="input-name" type="text" /></td>
  </tr>
  <tr>
    <td>Age: </td>
    <td><input class="input-age" type="text" /></td>
  </tr>
</table>

Answer 2

这个怎么样？

<强> HTML：

<input type="text" id="inputText">

JAVASCRIPT（使用jQuery）：

$("#inputText").change(function(){
    $("#inputText").addClass('highlight');
});

https://jsfiddle.net/cjuag8mh/1/

Change Method