如何检测文本框的内容发生了变化

我想检测文本框的内容何时发生了变化。我可以使用keyup方法，但这也将检测不生成字母的击键，如方向键。我想到了两种使用keyup事件的方法:

显式检查所按键的ascii码是否为字母\backspace\delete 使用闭包来记住在击键之前文本框中的文本是什么，并检查这是否已更改。

两者看起来都有点麻烦。

当前回答

我想问你为什么要检测文本框的内容在实时改变?

另一种方法是设置一个计时器(通过setIntval?)，并将上次保存的值与当前值进行比较，然后重置计时器。这将保证捕捉任何变化，无论是由键、鼠标、其他你没有考虑到的输入设备引起的，甚至是JavaScript从应用程序的不同部分改变值(另一种没有人提到的可能性)。

2009-09-26 13:38:43

其他回答

我假设当文本框发生变化时，您希望做一些交互式的事情(即通过ajax检索一些数据)。我在寻找同样的功能。我知道使用全局变量不是最健壮或最优雅的解决方案，但我就是这么做的。这里有一个例子:

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

这里需要注意的一件关键事情是，我使用的是setTimeout而不是setInterval，因为我不想同时发送多个请求。这确保计时器在提交表单时“停止”，在请求完成时“启动”。当我的ajax调用完成时，我通过调用checkSearchChanged来做到这一点。显然，你可以展开它来检查最小长度，等等。

在我的例子中，我使用的是ASP。Net MVC，所以你可以看到如何将其与MVC Ajax结合在一起，以及在下面的帖子中:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

2010-12-21 16:45:06

使用textchange事件通过定制的jQuery shim跨浏览器输入兼容性。http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html(最近分叉github: https://github.com/pandell/jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js)

这处理所有输入标签，包括<textarea>内容</textarea>，这并不总是与改变keyup等工作(!)只有jQuery on("input propertychange")处理<textarea>标签一致，以上是对所有不理解输入事件的浏览器的一个填充。

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

JS Bin测试

这还可以处理粘贴、删除，并且不会重复keyup上的工作。

如果不使用shim，请使用jQuery on("input propertychange")事件。

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});

2016-09-01 23:31:46

你考虑使用变化事件吗?

$("#myTextBox").change(function() { alert("content changed"); });

2009-09-26 12:57:53

开始观察“输入”事件而不是“改变”事件。

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

.．.这是漂亮和干净的，但可以进一步扩展到:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

2012-03-31 12:09:20

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

您可以使用'input'事件来检测文本框中的内容更改。不要使用'live'来绑定事件，因为它在Jquery-1.7中已弃用，所以要使用'on'。

2013-02-27 12:18:00

如何检测文本框的内容发生了变化

推荐文章

最新文章

标签