根据我的经验，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代替
我有一个类似的需求(twitter样式的文本字段)。使用onkeyup和onchange。Onchange实际上负责在字段失去焦点时的鼠标粘贴操作。
[更新]在HTML5或更高版本中，使用oninput获取实时字符修改更新，如上面的其他答案所解释。
onkeyup发生在你输入之后，例如，我按下t，当我抬起手指的动作发生，但在keydown动作发生在我数字字符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() {
$(this).blur();
$(this).focus();
});
$("#inputId").change(function() {
// Do whatever you need to do on actual change of the value of the input field
});
这些天听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 >
“输入”对我很有用。
var searchBar = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
下面的代码为我工作良好的Jquery 1.8.3
HTML: <输入类型=“文本”id=“myId”/>
Javascript/JQuery：
$("#myId").on('change keydown paste input', function(){
doSomething();
});
要跟踪每一个，请尝试这个示例，并在此之前将光标闪烁率完全降低到零。
< 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其他做出反应
2018年到了，我是这么做的:
$(inputs).on('change keydown paste input propertychange click keyup blur',handler);
如果你能指出这种方法的缺陷，我会很感激。
我认为在2018年最好使用输入事件。
-
正如WHATWG规范所描述的(https://html.spec.whatwg.org/multipage/indices.html#event-input-input):
当用户更改值时向控件触发(参见 改变事件)
-
下面是一个如何使用它的例子:
<input type="text" oninput="handleValueChange()">
方法一:为输入添加事件监听器:
element.addEventListener("input", myFunction);
方法2:用JavaScript定义oninput属性:
element.oninput = function()
{
myFunction();
};
方法3:用HTML定义oninput属性:
<input type="text" oninput="myFunction();">
使用oninput而不是onchange。
index . html
<html>
<head>
<title>title here</title>
<script src="index.js"></script>
</head>
<body>
<input oninput="onclickhandler(this)"></input>
</body>
</html>
script.js
function onclickhandler(e) {
console.log(e.value);
}
推荐文章
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 在JavaScript中，什么相当于Java的Thread.sleep() ?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项，如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前，每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
