【问题标题】：Detecting value change of input[type=text] in jQuery在 jQuery 中检测 input[type=text] 的值变化
【发布时间】：2012-01-05 18:05:37
【问题描述】：

我想在每次特定输入框的值发生变化时执行一个函数。它几乎适用于$('input').keyup(function)，但例如在将文本粘贴到框中时没有任何反应。 $input.change(function) 仅在输入模糊时触发，那么我如何立即知道文本框何时更改了值？

【问题讨论】：

那么为什么不绑定keyup 和paste 事件呢？
devcurry.com/2009/07/… -- 检测剪切/复制/粘贴事件
@liho1eye paste 只是我想到的一个，我宁愿听一个明确的变化，也不愿考虑所有不同的传入路径。
@Jeriko 这是唯一可以更改值的两种方式（除了通过 js 代码进行明显更新）。
你还想捕获 Ctlr-X (cut)。

标签： jquery

【解决方案1】：

更新 - 2021 年

从 2021 年起，您可以使用 input 事件来处理所有符合输入值更改的事件。

$("#myTextBox").on("input", function() {
   alert($(this).val()); 
});

原答案

请记住，建议使用 'on' 而不是 'bind' 功能，因此请始终尝试使用这样的事件侦听器：

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});

【讨论】：

@NicolasS.Xu：直接赋值不会触发任何 DOM 事件
如果使用console.log()而不是alert会更好。键入alert 会很烦人。
@cytsunny 是的，alert 很烦人，但在这种情况下，是值更改时要执行的代码示例，它实际上可以是您想要的任何有效负载。
如果你右键粘贴，这将返回粘贴之前输入的值。
刚刚注意到这个函数执行了很多次，只需要"input"，没有添加任何其他内容

【解决方案2】：

说明

您可以使用 jQuery 的 .bind() 方法来做到这一点。查看jsFiddle。

样本

HTML

<input id="myTextBox" type="text"/>

jQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

更多信息

【讨论】：

【解决方案3】：

试试这个..感谢https://stackoverflow.com/users/1169519/teemu

在这里回答我的问题：~~https://stackoverflow.com/questions/24651811/jquery-keyup-doesnt-work-with-keycode-filtering?noredirect=1#comment38213480_24651811~~

这个解决方案帮助我推进了我的项目。

$("#your_textbox").on("input propertychange",function(){

   // Do your thing here.
});

注意：低版本 IE 的属性更改。

【讨论】：

【解决方案4】：

你也可以使用文本框事件 -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Try This

【讨论】：

【解决方案5】：

试试这个：

基本上，只需考虑每个事件：

HTML：

<input id = "textbox" type = "text">

jquery：

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
});

【讨论】：

【解决方案6】：

$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

选择浏览器建议

【讨论】：

【解决方案7】：

不要忘记cut 或select 事件！

接受的答案几乎是完美的，但它忘记了cut 和select 事件。

cut 在用户剪切文本时触发（CTRL + X 或通过右键单击）

select 在用户选择浏览器建议选项时触发

您也应该添加它们，如下所示：

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});

【讨论】：

【解决方案8】：

试试这个：

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})

【讨论】：

【解决方案9】：

使用这个： https://github.com/gilamran/JQuery-Plugin-AnyChange

它处理所有改变输入的方式，包括内容菜单（使用鼠标）

【讨论】：

你如何使用它？我将它包含在我的 HTML 中并使用了 $("input").anyChange(function (e) { console.log(e); });但它从未到达 console.log 行

【解决方案10】：

这些事件组合对我有用：

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});

【讨论】：