如何检测文本框的内容已更改

Question

我想检测文本框的内容是否发生了变化。我可以使用 keyup 方法，但这也会检测不生成字母的击键，例如箭头键。我想到了两种使用 keyup 事件的方法：

1. 明确检查按键的ascii码是否为字母\退格\删除
2. 使用闭包记住击键前文本框中的文本是什么，并检查它是否发生了变化。

两者看起来都有些麻烦。

Answer 1

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

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

...很好很干净，但可以进一步扩展为：

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

Answer 2

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

在 jQuery 中是 change() 事件。例如：

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

编辑

看了一些cmets，怎么样：

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

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

Answer 3

“更改”事件无法正常工作，但“输入”是完美的。

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

Answer 4

这个怎么样：

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

> jQuery 1.7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

这适用于 IE8/IE9、FF、Chrome

Answer 5

使用闭包记住击键之前复选框中的文本是什么，并检查它是否已更改。

是的。您不一定要使用闭包，但您需要记住旧值并将其与新值进行比较。

但是！这仍然不会捕获所有更改，因为有一种编辑文本框内容的方法不涉及任何按键。例如选择文本范围然后右键单击剪切。或者拖动它。或将其他应用程序中的文本放入文本框中。或通过浏览器的拼写检查更改单词。或者……

因此，如果您必须检测每个更改，则必须对其进行轮询。您可以window.setInterval 每隔（比如说）秒检查该字段与之前的值。您还可以将onkeyup 连接到相同的函数，以便更快地反映由按键引起的 变化。

麻烦？是的。但就是这样，或者只是按照正常的 HTML onchange 方式进行操作，不要尝试即时更新。

Answer 6

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

您可以使用“输入”事件来检测文本框中的内容变化。不要使用 'live' 来绑定事件，因为它在 Jquery-1.7 中已被弃用，因此请使用 'on'。

Answer 7

我假设您希望在文本框更改时进行交互（即通过 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

Answer 8

我会推荐看看 jQuery UI 自动完成小部件。他们在那里处理了大部分案例，因为他们的代码库比那里的大多数案例更成熟。

以下是演示页面的链接，您可以验证它是否有效。 http://jqueryui.com/demos/autocomplete/#default

您将从阅读源代码并了解他们如何解决它中获得最大的好处。你可以在这里找到它：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js。

基本上他们都做了，他们绑定到input, keydown, keyup, keypress, focus and blur。然后他们对page up, page down, up arrow key and down arrow key等各种键进行特殊处理。在获取文本框的内容之前使用计时器。当用户键入与命令不对应的键（向上键、向下键等）时，会有一个计时器在大约 300 毫秒后探索内容。在代码中是这样的：

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

使用计时器的原因是为了让 UI 有机会更新。当 Javascript 运行时，UI 无法更新，因此调用了延迟函数。这适用于其他情况，例如将注意力集中在文本框（由该代码使用）。

因此，如果您不使用 jQuery UI（或者在我的情况下开发自定义小部件），您可以使用小部件或将代码复制到您自己的小部件中。

Answer 9

您考虑使用change event 吗？

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

Answer 10

我想问一下，您为什么要实时检测文本框内容的变化？

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

Answer 11

通过自定义 jQuery shim 使用 textchange 事件以实现跨浏览器 input 兼容性。 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>content</textarea>，它并不总是适用于change keyup 等（！）只有jQuery on("input propertychange") 始终处理<textarea> 标签，以上是所有人的垫片不理解input事件的浏览器。

<!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 test

这还可以处理粘贴、删除，并且不会在 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());    
});  

Answer 12

有一个完整的工作示例here。

<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>

Answer 13

这样的事情应该可以工作，主要是因为focus 和focusout 最终会得到两个不同的值。我在这里使用data，因为它将值存储在元素中但不触及DOM。这也是一种存储与其元素相关的值的简单方法。您可以轻松地使用更高范围的变量。

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

Answer 14

此代码检测文本框的内容何时被用户更改并被 Javascript 代码修改。

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);

Answer 15

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

这个工作正常，但也触发了点击事件，这不好。我的系统进入了循环。 而

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

在我的场景中完美运行。它仅在值更改时才有效。 也可以使用 document.getElementById 而不是 $ 符号