jquery跟踪更改并在输入元素

时间:2017-04-04 20:30:58

标签: javascript jquery

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

//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')
        } 
    }
});

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

这个怎么样?

<强> HTML:

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

JAVASCRIPT(使用jQuery):

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

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

Change Method