根据我的经验,input type="text" onchange事件通常只发生在你离开(模糊)控件之后。
有办法迫使浏览器触发onchange每次文本字段内容的变化?如果不是,那么“手动”跟踪这种情况的最佳方法是什么?
使用onkey* events是不可靠的,因为您可以右键单击字段并选择粘贴,这将在没有任何键盘输入的情况下更改字段。
setTimeout是唯一的方法吗?丑:-)
根据我的经验,input type="text" onchange事件通常只发生在你离开(模糊)控件之后。
有办法迫使浏览器触发onchange每次文本字段内容的变化?如果不是,那么“手动”跟踪这种情况的最佳方法是什么?
使用onkey* events是不可靠的,因为您可以右键单击字段并选择粘贴,这将在没有任何键盘输入的情况下更改字段。
setTimeout是唯一的方法吗?丑:-)
当前回答
更新:
参见Another answer(2015)。
2009年原文答案:
你想让onchange事件触发按下键,模糊和粘贴?这是魔法。
如果你想在他们输入时跟踪更改,使用"onkeydown"。如果你需要用鼠标捕捉粘贴操作,请使用“onpaste”(IE, FF3)和“oninput”(FF, Opera, Chrome, Safari1)。
在Safari上<textarea>破碎。使用textInput代替
其他回答
2018年到了,我是这么做的:
$(inputs).on('change keydown paste input propertychange click keyup blur',handler);
如果你能指出这种方法的缺陷,我会很感激。
要跟踪每一个,请尝试这个示例,并在此之前将光标闪烁率完全降低到零。
< body > -试试onkeydown、onkeyup onkeypress <输入类型=“文本”“> <跨越> < /跨越> < >脚本 我的功能(瓦尔) /警报(val); var mySpan =文档. getelementsby mySpan += val+"<br>"; 文件。getElementsByTagName(“跨越”)[0 - 9]。内html = mySpan; 的 剧本< - > < / body >
Onblur:退出时生成事件
Onchange:如果在输入文本中做了任何更改,则在退出时生成事件
Onkeydown:在任何按键时产生事件(对于长时间按住键也一样)
Onkeyup:在任何密钥释放时生成事件
Onkeypress:与onkeydown(或onkeyup)相同,但不会对ctrl,backsace,alt其他做出反应
如果你只使用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。
确保你检查代码不花太多时间…否则会给用户留下不好的印象。
是的,诀窍是对键和鼠标开火…但要小心两者都可能被解雇,所以要记住这一点!!
这些天听oninput。感觉就像在改变,而不需要失去对元素的关注。它是HTML5。
除了IE8及以下版本,所有人(甚至是移动设备)都支持它。为IE添加onpropertychange。我是这样使用的:
const source = document.getElementById('source'); const result = document.getElementById('result'); const inputHandler =函数(e) { 结果。innerHTML = e.target.value; } 源。addEventListener(“输入”,inputHandler); 源。addEventListener (propertychange, inputHandler);//用于IE8 // Firefox/Edge18-/IE9+不启动<select><option> . // / /源。addEventListener(‘改变’,inputHandler); <输入id = "源" > < div id = "结果" > < / div >