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

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

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

两者看起来都有点麻烦。

当前回答

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

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

2013-02-27 12:18:00

其他回答

在HTML/标准JavaScript中使用onchange事件。

在jQuery中这就是change()事件。例如:

$('element').change(function() {// do something});

EDIT

看了一些评论后，你觉得:

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

2009-09-26 12:56:50

document.getElementById('txtrate' + rowCount).onchange = function () {            
       // your logic
};

这个工作得很好，但在点击时也会触发事件，这并不好。我的系统进入循环。而

$('#txtrate'+rowCount).bind('input', function() {
        //your logic
} );

在我的场景中非常适用。它只在值改变时起作用。可以使用document代替$ sign。getElementById太

2020-07-28 11:01:00

我假设当文本框发生变化时，您希望做一些交互式的事情(即通过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

这里有一个完整的工作示例。

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

2014-11-30 12:00:34

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

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

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

推荐文章

最新文章

标签