Ily*_*man 407 html javascript forms
根据我的经验,input type="text" onchange事件通常只在你离开(blur)控件之后才会发生.
有没有办法强制浏览器onchange每次textfield内容更改时触发？如果没有,那么"手动"追踪这个最优雅的方式是什么？
使用onkey*事件是不可靠的,因为您可以右键单击该字段并选择"粘贴",这将更改该字段而不需要任何键盘输入.
是setTimeout唯一的方法吗？丑陋的:-)
Rob*_*mer 593
这几天听oninput. 感觉就像onchange没有必要失去对元素的关注.这是HTML5.
它受到所有人(甚至是移动设备)的支持,除了IE8及以下版本.对于IE添加onpropertychange.我这样使用它:
const $source = document.querySelector('#source');
const $result = document.querySelector('#result');
const typeHandler = function(e) {
$result.innerHTML = e.target.value;
}
$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough<input id="source" />
<div id="result"></div>Cre*_*esh 260
更新:
见另一个答案(2015年).
2009年原创答案:
那么,您希望onchange事件在keydown,blur 和 paste 上触发吗？这太神奇了.
如果要在键入时跟踪更改,请使用"onkeydown".如果需要使用鼠标捕获粘贴操作,请使用"onpaste"(IE,FF3)和"oninput"(FF,Opera,Chrome,Safari 1).
1 在Safari上打破<textarea>.请textInput改用
Amr*_*ngh 42
下面的代码适用于Jquery 1.8.3
HTML: <input type="text" id="myId" />
使用Javascript/JQuery的:
$("#myId").on('change keydown paste input', function(){
doSomething();
});
San*_*ahu 37
Javascript在这里是不可预测和有趣的.
onchange 仅在模糊文本框时才会出现onkeyup&onkeypress并不总是发生在文本更改上onkeydown 在文本更改时发生(但无法通过鼠标单击跟踪剪切和粘贴)onpaste&oncut有按键,甚至用鼠标右键单击发生.因此,跟踪文本框中的变化,我们需要onkeydown,oncut和onpaste.在这些事件的回调中,如果检查文本框的值,则在回调后更改值时不会获得更新的值.因此,解决此问题的方法是设置超时功能,超时为50毫秒(或可能更短)以跟踪更改.
这是一个肮脏的黑客,但这是我研究的唯一方法.
这是一个例子. http://jsfiddle.net/2BfGC/12/
Fer*_*dré 11
onkeyup例如,t当你按下手指后按下动作时会发生这种情况,但是keydown在我对角色进行数字处理之前动作就会发生t
希望这对某人有帮助.
因此onkeyup,当您想要发送刚刚输入的内容时,这样做会更好.
小智 11
使用oninput而不是onchange.
索引.html
<html>
<head>
<title>title here</title>
<script src="index.js"></script>
</head>
<body>
<input oninput="onclickhandler(this)"></input>
</body>
</html>
脚本.js
function onclickhandler(e) {
console.log(e.value);
}
我有类似的要求(推特风格的文字字段).用过onkeyup和onchange.onchange实际上在从现场失去焦点时处理鼠标粘贴操作.
[更新]在HTML5或更高版本中,用于oninput获取实时字符修改更新,如上面的其他答案中所述.
小智 7
如果您仅使用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>
希望有所帮助.
方法1：添加事件监听器input：
element.addEventListener("input", myFunction);
方法2：oninput使用JavaScript定义属性：
element.oninput = function()
{
myFunction();
};
方法3：oninput使用HTML定义属性：
<input type="text" oninput="myFunction();">
小智 5
请使用 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
});
我认为在2018年使用该input活动会更好。
--
如WHATWG规范所述（https://html.spec.whatwg.org/multipage/indices.html#event-input-input）：
当用户更改值时在控件上触发（另请参见change事件）
--
以下是使用方法的示例：
<input type="text" oninput="handleValueChange()">
| 归档时间： |
|
| 查看次数： |
446280 次 |
| 最近记录： |