每次使用 JQuery 在输入字段中更改内容时如何执行功能？答案

【问题标题】：How to execute a function every time the content is changed in an input field using JQuery?每次使用 JQuery 在输入字段中更改内容时如何执行功能？
【发布时间】：2011-05-25 11:50:43
【问题描述】：

我有一个文本字段<input type="text" id="search" />，我想在每次用户更改其中的内容时执行一个 JavaScript 函数（逐个字母）。如何使用 jQuery 做到这一点？

我尝试实现该函数作为Using JQuery, how do you detect if the value of a text input has changed while the field still has focus? 的答案，但我没有任何反应。

这是我的 HTML：

<html>
<head>
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/search.js"></script>
</head> 
<body> 
<form>
<input type="text" name="search" id="search" /> 
</form>
</body> 
</html>

我的 search.js 是：

var target = $('#search'), val = target.val();

function search()
{
    alert('search');
}

target.keyup(search);

我也尝试过（没有任何反应）：

$('input[name=search]').change(function() {
    alert('changed');
})

如果我尝试使用 jQuery 添加一些 HTML，它会起作用：

$(function(){
    $("<p>hello</p>").insertAfter("#search");
})

【问题讨论】：

元素的id是search，而不是itemsearch，如果你想访问DOM元素，你总是必须把代码放在$(function(){...})里面。

标签： javascript jquery events input

【解决方案1】：

在控件失去焦点之前不会触发更改事件。如果你只对文本感兴趣，你可以在内容改变之前用.keypress()做一些事情，或者在内容改变之后用.keyup()做一些事情。

这是在 jsfiddle 中使用按键的示例：http://jsfiddle.net/R6vmZ/

【讨论】：

keyup 会更好，因为 keypress 事件会在字段内容更改之前触发。
@Marcel Korpel：我已经更新了我的答案以表明这两种方法。