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

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

两者看起来都有点麻烦。


当前回答

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

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

其他回答

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

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

然而!这仍然不会捕捉每一个变化,因为有一种编辑文本框内容的方法,不涉及任何按键。例如,选择一个文本范围,然后右键单击剪切。或者拖着它。或者从另一个应用程序中删除文本到文本框中。或者通过浏览器的拼写检查更改一个单词。还是……

因此,如果必须检测每个变化,就必须进行轮询。你可以打开窗户。setInterval每(比如说)秒检查字段是否与之前的值对应。您还可以将onkeyup连接到相同的函数,以便更快地反映由按键引起的更改。

麻烦吗?是的。但这就是正常的HTML onchange方式,不要尝试即时更新。

该代码检测文本框的内容何时被用户更改,何时被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);

类似这样的东西应该可以工作,主要是因为focus和focusout最终会得到两个不同的值。我在这里使用数据,因为它在元素中存储值,但不涉及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);
}

“change”事件不能正常工作,但“input”是完美的。

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

你考虑使用变化事件吗?

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