在jQuery中检测input [type = text]的值更改


159

我想在每次特定输入框的值更改时执行一个函数。它几乎可以与一起使用$('input').keyup(function),但是例如在将文本粘贴到框中时什么也不会发生。$input.change(function)仅在输入模糊时才触发,所以每当文本框更改值时我如何立即知道?


2
那么为什么不同时绑定keyuppaste事件呢?
伊利亚·G

devcurry.com/2009/07/…-检测剪切/复制/粘贴事件
BeRecursive 2012年

2
@ liho1eye paste只是我想到的一个,我宁愿听一个确定的更改,也不必考虑所有不同的传入路径。
杰里科2012年

@Jeriko这是可以更改值的唯一两种方法(除了通过js代码进行明显的更新之外)。
Ilia G

您还想捕获Ctlr-X(cut)。
亚历克西斯·威尔克

Answers:


341

只是建议将“ on”推荐为超过“ bind”功能,因此请始终尝试使用如下事件监听器:

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

为什么paste呢 首先,我认为只有将粘贴到,它才能起作用CTRL+V
黑色

3
@ NicolasS.Xu:值的直接赋值不会触发任何DOM事件
Alejandro Silva,

如果使用console.log()代替会更好alert。锁定key会很烦人alert
cytsunny

4
@cytsunny是的,警报很烦人,但是在这种情况下,这是要对值更改执行的代码的示例,它实际上可以是您想要的任何有效负载。
亚历杭德罗·席尔瓦

1
如果右键单击并粘贴,这将返回粘贴之前输入的值。
alstr

104

描述

您可以使用jQuery的.bind()方法执行此操作。查看jsFiddle

样品

HTML

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

jQuery的

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

更多信息



6

您还可以使用文本框事件-

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

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

试试这个


5

试试这个:

基本上,只考虑每个事件:

HTML:

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

jQuery:

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

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




0

这些事件组合对我有用:

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

0

不要忘了cutselect活动!

可接受的答案几乎是完美的,但它忘记了cutselect事件。

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

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

您也应该添加它们,如下所示:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.