在输入type="text"时跟踪更改的最佳方法?

根据我的经验，input type="text" onchange事件通常只发生在你离开(blur)控制之后。

是否有一种方法迫使浏览器触发onchange每次textfield内容的变化?如果不是，那么“手动”跟踪这种情况的最佳方法是什么?

使用onkey*事件是不可靠的，因为您可以右键单击该字段并选择Paste，这将在没有任何键盘输入的情况下更改该字段。

setTimeout是唯一的方法吗?丑:-)

691849 次浏览
小开

你也可以使用keydown， keyup和keypress事件。

小开
最佳答案

< em >更新:< / em >

参见另一个答案(2015)。

2009年原文答案:

你想让onchange事件在按下键时触发，模糊，而且粘贴?这是魔法。

如果您想在输入时跟踪更改，请使用"onkeydown"。如果你需要用鼠标捕捉粘贴操作，使用"onpaste" (即， FF3)和"oninput" (FF, Opera, Chrome, Safari1)。

# EYZ2 # EYZ3

小开

我有一个类似的需求(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只在模糊文本框时出现
  • # EYZ0,onkeypress并不总是在文本更改时出现
  • onkeydown发生在文本更改时(但不能跟踪cut &用鼠标点击粘贴)
  • # EYZ0,oncut发生在按键甚至鼠标右键时。

因此，为了跟踪文本框中的变化，我们需要onkeydown， oncut和onpaste。在这些事件的回调中，如果你检查文本框的值，那么你不会得到更新的值，因为该值在回调后发生了变化。因此，解决方案是设置一个超时函数，其超时时间为50毫秒(或更少)，以跟踪更改。

这是一个肮脏的黑客，但据我研究，这是唯一的方法。

这里有一个例子。 # EYZ0 < / p >

小开

请，判断下一个方法使用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
});
小开

感觉就像onchange，不需要失去对元素的关注。它是HTML5。

除了IE8及以下版本，所有人(甚至是移动设备)都支持它。IE添加onpropertychange。我是这样使用的:

const source = document.getElementById('source');
const result = document.getElementById('result');


const inputHandler = function(e) {
result.innerHTML = e.target.value;
}


source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 
<input id="source">
<div id="result"></div>

小开

“输入”对我很有用。

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
小开

下面的代码为我工作良好的Jquery 1.8.3

HTML: # eyz0

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:退出时生成事件

Onchange:如果在输入文本中做了任何更改，则在退出时生成事件

Onkeydown:在任何按键时产生事件(对于长时间按住键也一样)

Onkeyup:在任何密钥释放时生成事件

Onkeypress:与onkeydown(或onkeyup)相同，但不会对ctrl,backsace,alt其他做出反应

小开

2018年到了，我是这么做的:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

如果你能指出这种方法的缺陷，我会很感激。

小开

我认为在2018年最好使用input活动。

-

WHATWG规范描述(https://html.spec.whatwg.org/multipage/indices.html#event-input-input):

当用户更改值时向控件发射(参见 # EYZ0) < / p >

-

下面是一个如何使用它的例子:

<input type="text" oninput="handleValueChange()">
小开

为input添加一个事件监听器:

element.addEventListener("input", myFunction);

,

使用JavaScript定义oninput属性:

element.oninput = function()
{
myFunction();
};

,

使用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);
}

提交答案