以我的经验,input type="text"
onchange
事件通常只会在您离开(blur
)后才会发生。在input type =“text”中跟踪onchange的最佳方式是什么?
有没有办法强制浏览器触发onchange
每次textfield
的内容更改?如果不是,那么“手动”跟踪这种最优雅的方式是什么?
使用onkey*
事件是不可靠的,因为您可以右键单击该字段并选择粘贴,并且这将更改该字段,而无需任何键盘输入。
是setTimeout
的唯一途径?..丑:-)
以我的经验,input type="text"
onchange
事件通常只会在您离开(blur
)后才会发生。在input type =“text”中跟踪onchange的最佳方式是什么?
有没有办法强制浏览器触发onchange
每次textfield
的内容更改?如果不是,那么“手动”跟踪这种最优雅的方式是什么?
使用onkey*
事件是不可靠的,因为您可以右键单击该字段并选择粘贴,并且这将更改该字段,而无需任何键盘输入。
是setTimeout
的唯一途径?..丑:-)
更新:
见Another answer(2015年)。
原2009年答:
所以,你想要的onchange
事件触发上的keydown,模糊,和贴?这是魔术。
如果要在输入时跟踪更改,请使用"onkeydown"
。如果需要使用鼠标捕捉粘贴操作,请使用"onpaste"
(IE,FF3)和"oninput"
(FF, Opera, Chrome, Safari )。
在Safari上损坏为<textarea>
。使用textInput
代替
你可以使用,keyup
和keypress
事件也是如此。
我有一个类似的要求(Twitter风格文本字段)。使用onkeyup
和onchange
。 onchange
实际上在现场丢失焦点期间照顾鼠标粘贴操作。
[更新]在HTML5或更高版本中,使用oninput
获得实时字符修改更新,如上面其他答案中所述。
onkeyup
发生了,你键入比如后,我按t
,当我抬起动作发生,但在行动之前,我数字的字符t
希望这是有帮助的人发生了手指。
因此onkeyup
是更好的,当你想发送你刚才输入的内容。
如果仅使用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>
希望有所帮助。
有一个相当接近的解决方案(不修复所有粘贴的方式),但其中大部分:
它适用于输入,以及用于文本域:
<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。
确保检查代码不需要太多时间...否则用户会得到一个不好的印记。
是的,诀窍是触发键和鼠标......但要小心这两个可以被解雇,所以要记住这样的!
在这里,Javascript是不可预测和有趣的。
onchange
只有当你模糊的文本框onkeyup
& onkeypress
并不总是基于文本更改onkeydown
出现在文本变化发生(但不能跟踪切割&膏鼠标点击)onpaste
& oncut
与按键发生,甚至用鼠标右键单击。因此,跟踪文本框中的变化,我们需要onkeydown
,oncut
和onpaste
。在这些事件的回调中,如果您检查文本框的值,那么在回调后值被更改时,您不会获得更新的值。因此,解决方案是设置一个超时功能,超时时间为50毫秒(或可能更少)以跟踪更改。
这是一个肮脏的黑客攻击,但这是我研究的唯一途径。
这里是一个例子。 http://jsfiddle.net/2BfGC/12/
请使用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
});
这些天听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>
“输入”为我工作。
var searchBar = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
下面的代码工作正常,我用jQuery 1.8.3
HTML:<input type="text" id="myId" />
的JavaScript/JQuery的:
$("#myId").on('change keydown paste input', function(){
doSomething();
});
跟踪每个尝试这个例子,在这之前完全将光标闪烁率降至零。
<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反应
你有没有在IE检查oninput(没有它在Mac上)?因为检查粘贴本身是不够的:例如,您可以选择并剪切。谢谢。 – 2009-02-22 20:32:53
'onkeypress`应该用来代替`onkeydown`。点击某个按键时,onkeydown会触发。如果用户按住一个键,则该事件将仅针对第一个字符触发一次。只要将字符添加到文本字段,就会触发`onkeypress`。 – fent 2012-03-12 17:22:36
对所有这些行为进行'onchange'射击并不是很神奇。 ``对于大多数人来说会做得足够好。 – aroth 2012-04-25 11:09:18