<input type="text"> 的值可以通过多种方式更改，包括：
我希望我的 JavaScript 函数在任何时候被调用（使用当前输入值）。而且我希望它立即被调用，而不仅仅是在输入失去焦点时。
我正在寻找在所有浏览器中执行此操作的最简洁、最可靠的方法（最好使用 jQuery）。
【问题讨论】：
标签： javascript jquery html
这个 jQuery 代码可以捕捉对任何元素的即时更改，并且应该适用于所有浏览器：
$('.myElements').each(function() {
var elem = $(this);
// Save current value of element
elem.data('oldVal', elem.val());
// Look for changes in the value
elem.bind("propertychange change click keyup input paste", function(event){
// If value has changed...
if (elem.data('oldVal') != elem.val()) {
// Updated stored value
elem.data('oldVal', elem.val());
// Do action
....
}
});
});
【讨论】：
input 是我认为应该涵盖所有现代浏览器的 HTML5 事件 (MDN reference)。 keyup 应该会赶上其余的，尽管会有一点延迟（input 在按键按下时触发）。 propertychange 是一个专有的 MS 事件，我不确定 paste 是否真的有必要。
document.getElementById('txtInput').value = 'some text'; 之类的 javascript 更改文本时，这无法处理
jQuery >= 1.9 的实时精美解决方案
$("#input-id").on("change keyup paste", function(){
dosomething();
})
如果您还想检测“点击”事件，只需：
$("#input-id").on("change keyup paste click", function(){
dosomething();
})
如果您使用的是 jQuery live 而不是 on。
【讨论】：
不幸的是，我认为setInterval 中奖了：
<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>
这是最简洁的解决方案，只需 1 行代码。它也是最强大的，因为您不必担心 input 可以获取值的所有不同事件/方式。
使用 'setInterval' 的缺点似乎不适用于这种情况：
【讨论】：
绑定到oninput 事件似乎在大多数理智的浏览器中都能正常工作。 IE9也支持，但实现有问题（删除字符时不触发事件）。
对于 jQuery 版本 1.7+，on 方法对于绑定到这样的事件很有用：
$(".inputElement").on("input", null, null, callbackFunction);
【讨论】：
oninput 事件不适用于 input[type=reset] 或 javascript 编辑，如您在此测试中所见：codepen.io/yukulele/pen/xtEpb
2017 年回答：input event 对任何比 IE8 更新的东西都做到了这一点。
$(el).on('input', callback)
【讨论】：
input 事件未能检测到 JS 更改。
很遗憾，没有任何事件或一组事件符合您的条件。按键和复制/粘贴都可以通过keyup 事件处理。通过 JS 进行更改比较棘手。如果您可以控制设置文本框的代码，最好的办法是修改它以直接调用您的函数或触发文本框上的用户事件：
// Compare the textbox's current and last value. Report a change to the console.
function watchTextbox() {
var txtInput = $('#txtInput');
var lastValue = txtInput.data('lastValue');
var currentValue = txtInput.val();
if (lastValue != currentValue) {
console.log('Value changed from ' + lastValue + ' to ' + currentValue);
txtInput.data('lastValue', currentValue);
}
}
// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());
// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);
// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
$('#txtInput').val('abc def').trigger('set');
});
如果您无法控制该代码，您可以使用 setInterval() 来“观察”文本框的更改：
// Check the textbox every 100 milliseconds. This seems to be pretty responsive.
setInterval(watchTextbox, 100);
这种主动监控不会“立即”捕获更新，但它似乎足够快，没有明显的延迟。正如 DrLouie 在 cmets 中指出的那样，如果您需要查看大量输入，此解决方案可能无法很好地扩展。您可以随时将第二个参数调整为 setInterval() 以增加或减少检查频率。
【讨论】：
myTextBox.value = 'foo';。没有 JavaScript 事件可以处理这种情况。
input.onpropertychange 处理它，而 FF2+、Opera 9.5、Safari 3 和 Chrome 1 可以处理它与input.__defineSetter__('value', ...) 一起使用（尽管它被记录为在 DOM 节点上不起作用，但我可以验证它是否有效）。与 IE 实现的唯一不同之处在于 IE 不仅会在编程设置时触发处理程序，还会在关键事件期间触发处理程序。
如果您不喜欢任何其他答案，这里有一个稍微不同的解决方案：
var field_selectors = ["#a", "#b"];
setInterval(function() {
$.each(field_selectors, function() {
var input = $(this);
var old = input.attr("data-old-value");
var current = input.val();
if (old !== current) {
if (typeof old != 'undefined') {
... your code ...
}
input.attr("data-old-value", current);
}
}
}, 500);
请考虑您不能依赖单击和键位来捕获上下文菜单粘贴。
【讨论】：
$("input[id^=Units_]").each(function() {
这是一个不使用 jQuery 的解决方案（现在它确实已经过时且没有必要）
使用事件"input"，您可以查找任何类型的更改：
删除、退格、粘贴、键入以及任何会更改输入值的内容。
input 事件与文本输入直接相关。任何时候以任何方式更改文本，都会发送input。
document.querySelector("#testInput").addEventListener("input", test);
function test(e) {
var a = document.getElementById('output');
a.innerText += "Detected an Update!\n";
}<input id="testInput">
<br>
<a id="output"></a>【讨论】：
在某处添加这段代码，这样就可以了。
var originalVal = $.fn.val;
$.fn.val = function(){
var result =originalVal.apply(this,arguments);
if(arguments.length>0)
$(this).change(); // OR with custom event $(this).trigger('value-changed');
return result;
};
【讨论】：
虽然这个问题是 10 年前发布的，但我相信它仍然需要一些改进。所以这是我的解决方案。
$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
// Do something here
});
此解决方案的唯一问题是，如果值从 $('selector').val('some value') 这样的 javascript 更改，它不会触发。当您从 javascript 更改值时，您可以向选择器触发任何事件。
$(selector).val('some value');
// fire event
$(selector).trigger('change');
或者单行
$(selector).val('some value').trigger('change');
【讨论】：
我创建了一个示例。愿它对你有用。
var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;
var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
clearTimeout(typingTimer);
if ($('#tyingBox').val) {
typingTimer = setTimeout(function () {
$("p.content").html('Typing...');
}, doneTypingInterval);
}
});
$('#tyingBox').keyup(function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(function () {
$("p.content").html(oldData);
}, finaldoneTypingInterval);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>
【讨论】：
我们实际上不需要设置循环来检测 JavaScript 更改。 我们已经为要检测的元素设置了许多事件侦听器。只需触发任何无害的事件即可完成工作。
$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});
$("input[name='test-element']").val("test").trigger("blur");
只有当您完全控制项目中的 javascript 更改时，才能使用此功能。
【讨论】：
嗯，最好的方法是覆盖你自己列出的这三个基地。一个简单的 :onblur、:onkeyup 等无法满足您的需求，因此只需将它们组合起来即可。
KeyUp应该涵盖前两个，如果Javascript修改输入框，那我当然希望是你自己的javascript，所以只要在修改它的函数中添加一个回调即可。
【讨论】：
这是一个工作示例，我使用它来实现填充 jqueryui 选择器（列表）的自动完成变体，但我不希望它的功能与执行下拉菜单的 jqueryui 自动完成完全相同。
$("#tagFilter").on("change keyup paste", function() {
var filterText = $("#tagFilter").val();
$("#tags").empty();
$.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
function(data) {
var i;
for (i = 0; i < data.length; i++) {
var tag = data[i].value;
$("#tags").append("<li class=\"tag\">" + tag + "</li>");
}
});
});
【讨论】：
您可以像这样简单地识别表单中的所有更改者
//when form change, show aleart
$("#FormId").change(function () {
aleart('Done some change on form');
});
【讨论】：
你不能用<span contenteditable="true" spellcheck="false"> 元素代替<input type="text"> 吗？
<span>（以contenteditable="true" spellcheck="false"为属性）与<input>不同主要是因为：
<input>。value 属性，但文本呈现为innerText 并成为其内部主体的一部分。 <input> 不是尽管您设置了属性multiline="true"。要完成外观，您当然可以在 CSS 中设置样式，而将值写为 innerText 您可以为其获取一个事件：
这是fiddle。
不幸的是，有些东西在 IE 和 Edge 中实际上不起作用，我找不到。
【讨论】：
您可以将“输入”事件绑定到<input type="text">。这将在每次输入更改（例如复制、粘贴、按键等）时触发。
$("#input-id").on("input", function(){
// Your action
})
【讨论】：
您可以查看此示例并选择您感兴趣的事件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>evetns</title>
</head>
<body>
<form>
<input class="controlevents" id="i1" type="text" /><br />
<input class="controlevents" id="i2" type="text" /><br />
<input class="controlevents" id="i3" type="text" /><br />
<input class="controlevents" id="i4" type="text" /><br />
<input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){
function testingevent(ev){
if (ev.currentTarget.tagName=="INPUT")
$("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}
var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
"beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
"readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
"mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
"afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
"mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];
var inputs = $(".controlevents");
$.each(eventlist, function(i, el){
inputs.bind(el, testingevent);
});
});
</script>
【讨论】：
我在这里聚会可能迟到了，但你能不能只使用 jQuery 提供的 .change() 事件。
你应该能够做类似...
$(#CONTROLID).change(function(){
do your stuff here ...
});
您始终可以将其绑定到具有类似...的控件列表
var flds = $("input, textarea", window.document);
flds.live('change keyup', function() {
do your code here ...
});
实时活页夹可确保处理页面上现在和将来存在的所有元素。
【讨论】：
这是最快且干净的方法：
我正在使用 Jquery-->
$('selector').on('change', function () {
console.log(this.id+": "+ this.value);
});
对我来说效果很好。
【讨论】：