Question

<input type="text">的价值可以通过多种方式改变，包括：

按键
复制/粘贴
使用JavaScript修改
通过浏览器或工具栏自动完成

我希望我的JavaScript函数在任何时候都会被调用（使用当前输入值）。我希望它能立即被调用，而不仅仅是当输入失去焦点时。

我正在寻找在所有浏览器中执行此操作的最干净，最强大的方法（最好使用jQuery）。

示例用例：在Twitter Signup页面上，用户名字段的值显示在其下方的网址“http://twitter/ 用户名”中。

Answer 1

这个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
       ....
     }
   });
 });

Answer 2

jQuery的实时奇特解决方案＆gt; = 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

如果你还想检测“点击”事件，只需：

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

如果您使用的是jQuery＆lt; = 1.4，请使用live代替on。

Answer 3

不幸的是，我认为setInterval赢得了奖项：

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

这是最干净的解决方案，只有一行代码。它也是最强大的，因为您不必担心input可以获得值的所有不同事件/方式。

在这种情况下，使用'setInterval'的缺点似乎不适用：

100毫秒延迟？对于许多应用程序，100毫秒足够快。
在浏览器上添加了负载？通常，在页面上添加大量的重量级setIntervals是不好的。但在这种特殊情况下，添加的页面加载是不可检测的。
它不能扩展到许多输入？大多数页面没有多少输入，您可以在同一个setInterval中嗅探所有输入。

Answer 4

绑定到oninput事件似乎在大多数理智的浏览器中都能正常工作。 IE9也支持它，但实现有问题（删除字符时不会触发事件）。

使用jQuery 1.7+版本，on方法可以绑定到这样的事件：

$(".inputElement").on("input", null, null, callbackFunction);

Answer 5

2017回答：input event对IE8以外的任何内容都做了这一点。

$(el).on('input', callback)

Answer 6

不幸的是，没有符合您条件的事件或事件集。可以使用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在评论中指出的那样，如果你需要观察大量的输入，这个解决方案可能无法很好地扩展。您可以随时将第二个参数调整为setInterval()，以便更频繁或更不频繁地进行检查。

Answer 7

如果你不喜欢任何其他答案，这是一个稍微不同的解决方案：

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

请注意，您不能依赖点击和键盘来捕获上下文菜单粘贴。

Answer 8

在某个地方添加此代码，这样就可以了。

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

在val() doesn't trigger change() in jQuery

找到此解决方案

Answer 9

我创建了一个样本。愿它适合你。

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>

http://jsfiddle.net/utbh575s/

Answer 10

我们实际上不需要设置循环来检测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");

和ofc只有在您对项目的javascript更改有完全控制权时才可以使用。

Answer 11

尽管这个问题是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');

Answer 12

嗯，最好的办法是覆盖你自己列出的三个基地。一个简单的：onblur，：onkeyup等不适用于你想要的东西，所以只需将它们组合起来。

KeyUp应该涵盖前两个，如果Javascript正在修改输入框，我确定希望它是你自己的javascript，所以只需在修改它的函数中添加一个回调。

Answer 13

您可以像这样简单地识别表单中的所有更改者

           //when form change, show aleart
            $("#FormId").change(function () {
                aleart('Done some change on form');
            });

Answer 14

这是我用来实现自动填充变体的一个工作示例，填充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>");
            }
        }); 
});

Answer 15

您不能仅使用<span contenteditable="true" spellcheck="false">元素代替<input type="text">吗？

<span>（contenteditable="true" spellcheck="false"属性）区别于<input>主要是因为：

它的样式不像<input>。
它没有value属性，但文本呈现为innerText并成为其内部主体的一部分。
虽然您设置了属性<input>，但它是多行而multiline="true"不是。{/ li>

要完成外观，当然可以在CSS中设置样式，而将值写为innerText则可以获得一个事件：

这是fiddle。

不幸的是，有些东西在IE和Edge中实际上并不起作用，我无法找到。

Answer 16

听，我知道这个问题已经很老了，但是对于2019年或以后的所有Future观众来说，甚至都不需要JS。 没有JQUERY！（在当今世界中已经过时了）

遗憾的是，此解决方案实际上只有1个错误：如果您检测到以下代码段中的字符变化，如果您的字符位于前面，并且删除了输入中的所有内容，它仍然会检测到它作为非ASCII。尝试再次将字符放置在此位置的前面，然后从文本末尾开始缓慢退格。

在HTML中有一个完美的解决方案：

（立即检测粘贴，键入，退格和其他此类更改）

function test() {
 var a = document.getElementById('testInput');
 var b = document.getElementById('output');
 var c = /^[ -~]+$/;
 if (!c.test(a.value)) {
  b.innerText = "Text is Ascii? : false";
 } else {
  b.innerText = "Text is Ascii? : true";
 }
}

Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input type="text" id="testInput" onchange="test()" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
<br>
<a id="output">Text is Ascii? : true</a>

Answer 17

您可以将'input'事件绑定到<input type="text">。每当输入更改（例如复制，粘贴，按键等）时，就会触发此操作。

$("#input-id").on("input", function(){
    // Your action
})

Answer 18

这对我有用：-

$("#typeyourid").on("input", (inputVar) => {
  
   let val = inputVar.currentTarget.value;
   console.log(val);
   //change html input value continuously   
   document.getElementById(id).setAttribute('value',val);
});

Answer 19

您可以看到此示例，并选择您感兴趣的事件：

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

Answer 20

我可能在这里参加聚会，但你不能只使用jQuery提供的.change（）事件。

你应该可以做类似......

$(#CONTROLID).change(function(){
    do your stuff here ...
});

您始终可以将其绑定到控件列表中，例如......

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

实时活页夹可确保处理现在和将来页面上存在的所有元素。

Answer 21

这是最快的＆amp;干净的方式来做到这一点：

我正在使用Jquery - ＆gt;

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

对我来说这很好。

使用JQuery检测对<input type =“text”/>（立即）的所有更改

21 个答案: