2009-02-22 98 views
313

以我的经验,input type="text"onchange事件通常只会在您离开(blur)后才会发生。在input type =“text”中跟踪onchange的最佳方式是什么?

有没有办法强制浏览器触发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上)?因为检查粘贴本身是不够的:例如,您可以选择并剪切。谢谢。 – 2009-02-22 20:32:53

+14

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

+50

对所有这些行为进行'onchange'射击并不是很神奇。 ``对于大多数人来说会做得足够好。 – aroth 2012-04-25 11:09:18

3

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

5

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

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

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> 

希望有所帮助。

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/

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 
}); 
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> 
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(); 
}); 
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反应

相关问题