根据我的经验,input type="text"
onchange
事件通常仅在您离开(blur
)控件后才会发生。
有没有一种方法可以强制浏览器在onchange
每次textfield
内容更改时触发?如果没有,“手动”跟踪此问题的最优雅方法是什么?
使用onkey*
事件并不可靠,因为您可以右键单击该字段并选择“粘贴”,这将更改该字段而无需任何键盘输入。
是setTimeout
唯一的方法吗?..丑陋的:-)
根据我的经验,input type="text"
onchange
事件通常仅在您离开(blur
)控件后才会发生。
有没有一种方法可以强制浏览器在onchange
每次textfield
内容更改时触发?如果没有,“手动”跟踪此问题的最优雅方法是什么?
使用onkey*
事件并不可靠,因为您可以右键单击该字段并选择“粘贴”,这将更改该字段而无需任何键盘输入。
是setTimeout
唯一的方法吗?..丑陋的:-)
IE8不支持Robert Siemer addEventListener。
“旧版本的IE支持等效的专有EventTarget.attachEvent()方法。” https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener
若要跟踪每个示例,请在此示例之前进行操作,然后再将光标闪烁速率完全降低为零。
<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:事件在退出时生成
onchange:如果输入文本中发生任何更改,则事件在退出时生成
onkeydown:任何按键按下都会生成事件(对于长时间按住键也是如此)
onkeyup:事件在任何键释放时生成
onkeypress:与onkeydown(或onkeyup)相同,但不会对ctrl,backsace,alt其他作出反应
“输入”对我有用。
var searchBar = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
有一个非常接近的解决方案(不解决所有粘贴方式),但是其中大多数:
它适用于输入以及文本区域:
<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。
确保您的检查代码不会花费太多时间...否则用户的印象不佳。
是的,诀窍是在键和鼠标上射击...但是要注意,两者都可以被射击,因此请记住!!!
请使用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
});
您可以使用keydown
,keyup
并且keypress
事件也是如此。
我认为在2018年使用该input
活动会更好。
--
如WHATWG规范所述(https://html.spec.whatwg.org/multipage/indices.html#event-input-input):
当用户更改值时在控件上触发(另请参见change事件)
--
这是一个使用方法的例子:
<input type="text" oninput="handleValueChange()">
这里的Javascript难以预测且有趣。
onchange
仅当您模糊文本框时才会发生onkeyup
&onkeypress
并非总是在文本更改时发生onkeydown
在文本更改时发生(但无法通过单击鼠标来跟踪剪切和粘贴)onpaste
&oncut
会通过按键甚至鼠标右键单击发生。因此,跟踪文本框中的变化,我们需要onkeydown
,oncut
和onpaste
。在这些事件的回调中,如果您检查文本框的值,那么您将无法获取更新的值,因为在回调后更改了该值。因此,解决方案是将超时功能设置为50毫秒(或更短)的超时来跟踪更改。
正如我研究的那样,这是一个肮脏的技巧,但这是唯一的方法。
这是一个例子。 http://jsfiddle.net/2BfGC/12/
我有类似的要求(推特样式文本字段)。二手onkeyup
和onchange
。onchange
实际上会在失去焦点时照顾鼠标粘贴操作。
[更新]在HTML5或更高版本中,用于oninput
获取实时字符修改更新,如上面其他答案所述。
onkeyup
例如在您键入t
手指时按下时,动作会发生,但是keydown
在我对字符进行数字输入之前,动作会发生t
希望这对某人有帮助。
因此onkeyup
,当您想要发送您刚才输入的内容时,它会更好。
更新:
参见另一个答案(2015)。
2009年原始答案:
因此,您是否希望onchange
事件在按键,模糊和粘贴时触发?太神奇了。
如果您想跟踪键入的更改,请使用"onkeydown"
。如果需要用鼠标捕获粘贴操作,请使用"onpaste"
(IE,FF3)和"oninput"
(FF,Opera,Chrome,Safari 1)。
1 断为<textarea>
在Safari。使用textInput
替代
方法1:为添加一个事件侦听器
input
:方法2:
oninput
使用JavaScript 定义属性:方法3:
oninput
使用HTML 定义属性: