在input type =“text”中跟踪onchange的最佳方式是什么?


313

以我的经验,input type="text"onchange事件通常只会在您离开(blur)后才会发生。

有没有办法强制浏览器触发onchange每次textfield的内容更改?如果不是,那么“手动”跟踪这种最优雅的方式是什么?

使用onkey*事件是不可靠的,因为您可以右键单击该字段并选择粘贴,并且这将更改该字段,而无需任何键盘输入。

setTimeout的唯一途径?..丑:-)

204

更新:

Another answer(2015年)。


原2009年答:

所以,你想要的onchange事件触发上的keydown,模糊,贴?这是魔术。

如果要在输入时跟踪更改,请使用"onkeydown"。如果需要使用鼠标捕捉粘贴操作,请使用"onpaste"IE,FF3)和"oninput"FF, Opera, Chrome, Safari )。

在Safari上损坏为<textarea>。使用textInput代替

  0

你有没有在IE检查oninput(没有它在Mac上)?因为检查粘贴本身是不够的:例如,您可以选择并剪切。谢谢。 22 2月. 092009-02-22 20:32:53

+14

'onkeypress'应该用来代替'onkeydown'。点击某个按键时,onkeydown会触发。如果用户按住一个键,则该事件将仅针对第一个字符触发一次。只要将字符添加到文本字段,就会触发'onkeypress'。 12 3月. 122012-03-12 17:22:36

+50

对所有这些行为进行'onchange'射击并不是很神奇。 '<input onchange =“doSomething();” onkeypress事件= “this.onchange();” onpaste = “this.onchange();” oninput =“this.onchange();”>'对于大多数人来说会做得足够好。 25 4月. 122012-04-25 11:09:18

  0

如何使用鼠标删除输入框中的某些文本?我认为这不会起作用。 27 8月. 122012-08-27 06:49:42

+1

我同意@DeaDEnD。实际上,我认为事件'input' +'onpropertychange' +'onkeypress'优于'input' +'onpaste' +'onkeydown'。 'onpropertychange'是IE与'input'的对应。 25 12月. 122012-12-25 10:43:22

  0

'onkeyup'或'onkeypress' 26 3月. 132013-03-26 15:52:01

+42

使用jquery 1.8.3,看起来像:''()。on('change keydown paste input',function(){})' 01 6月. 132013-06-01 22:34:13

+16

使用onkeyup获取文本后的文本改变... 11 12月. 132013-12-11 11:23:43

  0

如果使用'onkeydown',检查'.isChar'并过滤''Shift'',''Control''等'.key'值可能是一个好主意。 25 11月. 142014-11-25 04:28:56

  0

It可能值得注意的是,根据规范,onpaste是可以取消的,而ininput不是。 06 8月. 152015-08-06 08:40:51

+1

请参考@ Robert-Siemer的答案。它应该是新接受的答案。 01 2月. 162016-02-01 23:19:01

  0

@MaxPMagee:亚尔它应该。这些日子里,堆栈就是一个过时信息的荒原。我已经更新了这个答案来引用[@ RobertSiemer的回答](http://stackoverflow.com/a/26202266/45433)。我没有时间警惕我7岁的答案,所以感谢您引起我的注意! 02 2月. 162016-02-02 15:20:38

  0

这个答案是贬低的......看起来罗伯特·西默的答案是现代的,而且要好得多 02 4月. 172017-04-02 21:36:09

+1

@AriWais:YES,omg大多数SO应该被弃用。这个答案的人是* 8岁*。我希望有一个旧的答案的“弃用”按钮,比如这个,社区可以选择更好的。 03 4月. 172017-04-03 14:48:14


3

你可以使用​​,keyupkeypress事件也是如此。


5

我有一个类似的要求(Twitter风格文本字段)。使用onkeyuponchangeonchange实际上在现场丢失焦点期间照顾鼠标粘贴操作。

[更新]在HTML5或更高版本中,使用oninput获得实时字符修改更新,如上面其他答案中所述。

  0

如果您想要检测textarea,input:text,input:password或input:search元素的内容何时发生更改,oninput会很有用,因为这些元素上的onchange事件会在元素失去焦点时触发,而不是紧接在修改。 04 5月. 122012-05-04 08:59:28

  0

@hkasera是的,使用HTML5'oninput'是要走的路。但是,当我实现时,HTML5不存在,我们有IE 8 :(我很感激你的更新,因为它提供了最新的用户信息。 08 5月. 142014-05-08 18:47:38


7

onkeyup发生了,你键入比如后,我按t,当我抬起动作发生,但在​​行动之前,我数字的字符t

希望这是有帮助的人发生了手指。

因此onkeyup是更好的,当你想发送你刚才输入的内容。


6

如果仅使用Internet Explorer,您可以使用此:

<input type="text" id="myID" onpropertychange="TextChange(this)" /> 

<script type="text/javascript"> 
    function TextChange(tBox) { 
     if(event.propertyName=='value') { 
      //your code here 
     } 
    } 
</script> 

希望有所帮助。

+131

“如果你只使用Internet Explorer”???? :) 30 9月. 112011-09-30 13:18:55

+6

可能是一个内部项目,我猜... :) 12 12月. 122012-12-12 21:23:21

+79

感谢上帝我不住在那个房子里! :D 03 4月. 132013-04-03 14:42:09

+9

10年前在这句话中没有什么好笑的。:(:) 16 3月. 142014-03-16 16:26:19

+3

对我有帮助,我正在开发一个嵌入式操作系统的项目,其中IE是唯一的浏览器 22 9月. 142014-09-22 11:47:03

+1

如果你只使用互联网Explorer - LOL。2016年的日子! 07 10月. 162016-10-07 13:55:05


4

有一个相当接近的解决方案(不修复所有粘贴的方式),但其中大部分:

它适用于输入,以及用于文本域:

<input type="text" ... > 
<textarea ... >...</textarea> 

这样做:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" > 
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea> 

正如我所说的,并不是所有的方法都会在所有浏览器上粘贴一个事件......最糟糕的是有些事件根本不会触发任何事件,但是定时器对于这样的事件是非常可怕的。

但是,大多数粘贴方式都是通过键盘和/或鼠标完成的,因此粘贴后通常会触发onkeyup或onmouseup,而且在键盘上键入时也会触发onkeyup。

确保检查代码不需要太多时间...否则用户会得到一个不好的印记。

是的,诀窍是触发键和鼠标......但要小心这两个可以被解雇,所以要记住这样的!


30

在这里,Javascript是不可预测和有趣的。

  • onchange只有当你模糊的文本框
  • onkeyup & onkeypress并不总是基于文本更改
  • onkeydown出现在文本变化发生(但不能跟踪切割&膏鼠标点击)
  • 发生onpaste & oncut与按键发生,甚至用鼠标右键单击。

因此,跟踪文本框中的变化,我们需要onkeydownoncutonpaste。在这些事件的回调中,如果您检查文本框的值,那么在回调后值被更改时,您不会获得更新的值。因此,解决方案是设置一个超时功能,超时时间为50毫秒(或可能更少)以跟踪更改。

这是一个肮脏的黑客攻击,但这是我研究的唯一途径。

这里是一个例子。 http://jsfiddle.net/2BfGC/12/

+3

'oninput'和'textInput'是这个事件的实际解决方案,但它并没有被所有浏览器支持。 05 7月. 122012-07-05 06:59:38

+1

感谢提及'oncut' 19 11月. 142014-11-19 05:15:11

  0

对于第二个项目符号点我假设你的意思是'onkeyup'和'onkeydown',它们都是类似的,都可以捕获Ctrl,Alt,Shift和Meta键。对于第三个要点,我假设你的意思是'onkeypress'。 22 2月. 182018-02-22 14:56:49


2

请使用JQuery法官将于方法:

HTML:

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

使用Javascript(JQuery的):

$("#inputId").keyup(function(){ 
     $("#inputId").blur(); 
     $("#inputId").focus(); 
}); 

$("#inputId").change(function(){ 
     //do whatever you need to do on actual change of the value of the input field 
}); 
  0

我使用同样的方法: ) 25 6月. 152015-06-25 18:26:21

  0

我意识到这不是最新的答案,但不会模糊和重新聚焦每个键盘上的输入如果它在任何地方除了输入的结尾? 02 5月. 172017-05-02 16:26:04

  0

@ MichaelMartin-Smucker你会这样想,但显然不是:https://jsfiddle.net/gsss8c6L/ 04 7月. 172017-07-04 03:31:46


395

这些天听oninput感觉就像onchange,不需要关注元素。它是HTML5。

它受到所有人(甚至手机)的支持,除了IE8及以下版本。对于IE添加onpropertychange。我用这样的:

<script> 
    onload = function() { 
     var e = document.getElementById('myInput'); 
    e.oninput = myHandler; 
     e.onpropertychange = e.oninput; // for IE8 
     // e.onchange = e.oninput; // FF needs this in <select><option>... 
     // other things for onload() 
    }; 
</script> 
<input type=text id=myInput> 
+26

在Web标准这样一个不断变化的世界里,有时接受的答案可能会在几年后改变......这是我接受的新答案。 25 11月. 152015-11-25 15:50:08


3

“输入”为我工作。

var searchBar = document.getElementById("searchBar"); 
searchBar.addEventListener("input", PredictSearch, false); 

26

下面的代码工作正常,我用jQuery 1.8.3

HTML:<input type="text" id="myId" />

的JavaScript/JQuery的:

$("#myId").on('change keydown paste input', function(){ 
     doSomething(); 
}); 
+7

在问题中未标记jQuery **库**。 16 2月. 152015-02-16 21:03:48

+12

Jquery是一个Javascript API,我通过使用Jquery关键字进行搜索而带到这里,我不认为值得为每个jquery答案的javascript问题创建一个新问题... 27 5月. 152015-05-27 12:12:49

+5

如果人们不被允许建议在答案中使用图书馆将会有很多未解答的问题在SO 17 12月. 152015-12-17 03:01:24

  0

多次发生。可能由于变化和keydown。可能的输入只在这里需要。 01 9月. 172017-09-01 11:09:32


2

跟踪每个尝试这个例子,在这之前完全将光标闪烁率降至零。

<body> 
 
//try onkeydown,onkeyup,onkeypress 
 
<input type="text" onkeypress="myFunction(this.value)"> 
 
<span> </span> 
 
<script> 
 
function myFunction(val) { 
 
//alert(val); 
 
var mySpan = document.getElementsByTagName("span")[0].innerHTML; 
 
mySpan += val+"<br>"; 
 
document.getElementsByTagName("span")[0].innerHTML = mySpan; 
 
} 
 
</script> 
 

 
</body>

的onblur:事件生成在退出

平变化:事件生成在退出如果在inputText的所作的任何更改

的onkeydown:事件上的任意键按下产生(用于键也持有很长时间)

onkeyup:事件在任何密钥发布生成

onkeypress事件:相同的onkeydown(或的onkeyup),但不会为Ctrl,backsace,其他ALT反应