Question

根据我的经验，input type="text" onchange事件通常仅在您离开（blur）控件后才会发生。

有没有办法强制浏览器每次onchange内容更改时触发textfield？如果没有，那么“手动”追踪这个最优雅的方式是什么？

使用onkey*事件是不可靠的，因为您可以右键单击该字段并选择“粘贴”，这将更改该字段而不需要任何键盘输入。

setTimeout是唯一的方法吗？丑陋的： - ）

Answer 1

这些日子听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>

Answer 2

<强> 更新

见Another answer（2015）。

2009年原创答案：

那么，您希望在keydown，blur，和粘贴时触发onchange事件吗？这太神奇了。

如果要在键入时跟踪更改，请使用"onkeydown"。如果您需要使用鼠标捕获粘贴操作，请使用"onpaste"（IE，FF3）和"oninput"（FF, Opera, Chrome, Safari ¹ ）。

¹ _{在Safari上<textarea>已损坏。请改用textInput}

Answer 3

下面的代码适用于Jquery 1.8.3

HTML：<input type="text" id="myId" />

的Javascript / JQuery的：

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Answer 4

Javascript在这里是不可预测和有趣的。

onchange
onkeyup＆amp; onkeypress并不总是出现在文字更改
onkeydown（但无法通过点击鼠标跟踪剪切和粘贴）
onpaste＆amp;按键发生oncut，鼠标右键单击即可。

因此，要跟踪文本框中的更改，我们需要onkeydown，oncut和onpaste。在这些事件的回调中，如果检查文本框的值，则在回调后更改值时不会获得更新的值。因此，对此的解决方案是设置超时功能，超时为50毫秒（或可能更短）以跟踪更改。

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

这是一个例子。 http://jsfiddle.net/2BfGC/12/

Answer 5

键入之后发生

onkeyup，例如我按下t当我抬起手指时动作发生但keydown动作发生在我对字符t <进行数字处理之前/ p>

希望这对某人有帮助。

因此，当您想要发送刚输入的内容时，onkeyup会更好。

Answer 6

我有类似的要求（推特风格的文字字段）。已使用onkeyup和onchange。 onchange实际上在从现场失去焦点时处理鼠标粘贴操作。

[更新] 在HTML5或更高版本中，使用oninput获取实时字符修改更新，如上面其他答案中所述。

Answer 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>

希望有所帮助。

Answer 8

有一个非常接近的解决方案（不要修复所有的粘贴方式），但大部分都是：

它适用于输入和textareas：

<input type="text" ... >
<textarea ... >...</textarea>

这样做：

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

正如我所说的，并非所有方法都可以在所有浏览器上粘贴一个事件......最糟糕的是有些事情根本不会触发任何事件，但Timers很难被用于此类事件。

但是大多数粘贴方式都是用键盘和/或鼠标完成的，所以通常在粘贴后触发onkeyup或onmouseup，在键盘上键入时也会触发onkeyup。

确保您的支票代码不会花费太多时间......否则用户会受到不良影响。

是的，诀窍是触发键和鼠标......但要注意两者都可以被解雇，所以请记住这样!!!

Answer 9

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

Answer 10

“输入”对我有用。

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

Answer 11

我认为在2018年最好使用<select value={this.state.categoryItemID} onChange={this.handleSomething}> {(category && category.length > 0) && category.map((item: any) => { return ( <option value={item.id} key={item.id}>{item.localizations[this.props.currentLanguage].title}</option> ); }) } </select>事件。

-

正如WHATWG Spec描述的那样（https://html.spec.whatwg.org/multipage/indices.html#event-input-input）：

当用户更改值时，在控件处触发（另请参阅 change event）

-

以下是如何使用它的示例：

input

Answer 12

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

Answer 13

要跟踪每个尝试此示例，在此之前将光标闪烁率完全降低为零。

＆＃13;

<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>

＆＃13;

onblur：事件在退出时生成

onchange：如果在inputtext中进行了任何更改，则会在退出时生成事件

onkeydown：事件在任何按键上生成（对于持有很长时间的键也是如此）

onkeyup：事件在任何密钥发布上生成

onkeypress：与onkeydown（或onkeyup）相同，但不会对ctrl，backsace，alt other做出反应

Answer 14

2018年，这就是我的工作：

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

如果你能指出这种方法的缺陷，我将不胜感激。

Answer 15

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

Answer 16

IE8不支持Robert Siemer addEventListener。

“较旧版本的IE支持等效的专有EventTarget.attachEvent（）方法。” https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

Answer 17

方法1：为input添加事件监听器：

element.addEventListener("input", myFunction);

方法2：使用JavaScript定义oninput属性：

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

方法3：用HTML定义oninput属性：

<input type="text" oninput="myFunction();">

在输入类型=“文本”中跟踪onchange类型的最佳方法？

17 个答案: