Question

我想在文本框的内容发生变化时进行检测。我可以使用keyup方法，但这也会检测不生成字母的击键，如箭头键。我想到了使用keyup事件执行此操作的两种方法：

如果按下的键的ascii代码是字母\ backspace \ delete
使用闭包记住键击之前文本框中的文本是什么，并检查这是否已更改。

两者看起来都很麻烦。

Answer 1

开始观察'input'事件而不是'change'。

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

修改

在阅读了一些评论之后，那么：

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

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

Answer 3

'change'事件无法正常工作，但'输入'是完美的。

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

Answer 4

这个怎么样：

＆LT; jQuery 1.7

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

＆GT; 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());
});

您可以使用'input'事件来检测文本框中的内容更改。不要使用'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

我想问一下为什么你要检测文本框的内容何时实时改变？

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

Answer 10

你考虑使用change event吗？

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

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

这也可以处理粘贴，删除，并且不会在密钥上重复工作。

如果不使用垫片，请使用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

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

15 个答案:

的 JS Bin test