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

448

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

有没有一种方法可以强制浏览器在onchange每次textfield内容更改时触发？如果没有，那么“手动”跟踪的最优雅的方法是什么？

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

是setTimeout唯一的方法吗？..丑陋的:-)

javascript  html  forms 
— 伊利亚·伯曼（Ilya Birman）
source
@您是否有可能更新您接受的答案，以免将过时的答案固定在顶部？
— Flimm

Answers:

271

更新：

参见另一个答案（2015）。

2009年原始答案：

因此，您是否希望onchange事件在键盘按下，模糊和粘贴时触发？太神奇了。

如果要跟踪更改的类型，请使用"onkeydown"。如果您需要使用鼠标来捕获粘贴操作，请使用"onpaste"（IE，FF3）和"oninput"（FF，Opera，Chrome，Safari 1）。

1 断为<textarea>在Safari。使用textInput替代

— 新月新鲜
source
22
onkeypress应该代替onkeydown。onkeydown按下键时触发。如果用户按住某个键，则第一个字符只会触发一次事件。onkeypress每当将char添加到文本字段时都会触发。
— 芬
61
onchange在所有这些动作上放火并不是很神奇。 <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">对于大多数人来说会做得很好。
— aroth 2012年
1
使用鼠标删除输入框中的某些文本怎么办？我认为这行不通。
— Jeevan
47
使用jquery 1.8.3，看起来像：$().on('change keydown paste input', function() {})
— Narfanator 2013年
4
@AriWais：是的，大部分SO应该被弃用。市民这个答案是8岁。我希望有一个“弃用”按钮来回答这样的旧答案，并且社区可以选择更好的答案。
— Crescent Fresh
656

这些天来听听oninput。 感觉就像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>
展开摘要

— 罗伯特·西默
source
63
在Web标准这样一个日新月异的世界中，有时可接受的答案可能会在几年后发生变化……这是我新接受的答案。
— Erick Petrucelli 2015年
1
oninput即使在IE9中也支持部分（caniuse.com/#feat=input-event）。
— 肯尼·崔
可能值得使用它innerText，innerHTML以便不呈现任何标记
— Jeevan Takhar
47

下面的代码对我使用Jquery 1.8.3很好

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

Javascript / JQuery：

$("#myId").on('change keydown paste input', function(){
      doSomething();
});
— 阿姆利特·帕·辛格（Amrit Pal Singh）
source
11
jQuery 库未在问题中标记。
— John Weisz 2015年
21
Jquery是Javascript api，我是通过使用Jquery关键字进行搜索而带到这里的，我认为不值得为Jquery答案的每个javascript问题创建一个新问题...
— GaelDev 2015年
12
如果不允许人们建议在答案中使用图书馆，那么SO上还会有更多未解决的问题
— Dietbacon 2015年
3
触发多次。可能是由于更改和按键设置。仅在这里可能需要输入。
— mmm
1
您不需要，keydown因为它将复制输入的值，将其删除。
— Youssef Al Subaihi
42

这里的Javascript难以预测且有趣。

  • onchange 仅当您模糊文本框时才会发生
  • onkeyup＆onkeypress并非总是在文本更改时发生
  • onkeydown 在文本更改时发生（但无法通过单击鼠标来跟踪剪切和粘贴）
  • onpaste＆oncut会在按键时甚至在鼠标右键单击时发生。

因此，跟踪文本框中的变化，我们需要onkeydown，oncut和onpaste。在这些事件的回调中，如果您检查文本框的值，那么您将无法获取更新的值，因为在回调后更改了该值。因此，解决方案是将超时功能设置为50毫秒（或更短）的超时时间来跟踪更改。

正如我研究的那样，这是一个肮脏的技巧，但这是唯一的方法。

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

— Sanket Sahu
source
4
oninput和textInput事件，这是实际的解决方案，但并非所有浏览器都支持。
— Sanket Sahu 2012年
对于第二个要点，我认为您的意思是onkeyup和onkeydown，它们相似。两者都可以捕获Ctrl，Alt，Shift和Meta键。对于第三个要点，我想你的意思是onkeypress。
— 丹尼尔·史蒂文斯
12

onkeyup例如在您键入t手指时按下时发生动作，但是keydown在我对字符进行数字输入之前，动作发生t

希望这对某人有帮助。

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

— 费尔南多·安德烈
source
8

我有类似的要求（推特样式文本字段）。二手onkeyup和onchange。onchange实际上会在失去焦点时照顾鼠标粘贴操作。

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

— 莫希尼
source
如果要检测textarea，input：text，input：password或input：search元素的内容何时更改，则oninput很有用，因为这些元素上的onchange事件在元素失去焦点时触发，而不是在修改后立即触发。
— hkasera 2012年
@hkasera是的，使用HTML5 oninput是必经之路。但是，当我实现，HTML5是不存在的，我们有IE 8 :(我很欣赏你的更新，因为它提供了最新信息，为用户。
— 莫尼什
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>

希望能有所帮助。

— 罗兰·德斯链
source
8
我想可能是一个内部项目... :)
— eselk 2012年
94
谢天谢地，我不住在那所房子里！：D
— Marco Matarazzi
13
10年前这句话没有什么好笑的.. ::
— –MichałTabor 2014年
4
对我来说，这很有帮助，我正在开发一些嵌入式操作系统的项目，其中IE是唯一的浏览器。
— Anders M.
3
如果仅使用Internet Explorer-大声笑。在2016年度过了美好的一天！
— 杰克·布莱克
4

有一个非常接近的解决方案（不解决所有粘贴方式），但是其中大多数：

它适用于输入以及文本区域：

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

确保您的检查代码不会花费太多时间...否则用户的印象不佳。

是的，诀窍是在键和鼠标上射击...但是要注意，两者都可以被射击，因此请记住！！！

— 666
source
4

请使用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
});
— 亚历克斯·乌克
source
我使用相同的方式
— ：）
我意识到这不是最新的答案，但是如果除了输入末尾以外的任何地方，都不会模糊每个键盘上的输入并重新将其聚焦在螺钉上吗？
— Michael Martin-Smucker
@ MichaelMartin-Smucker您可能会这样想，但显然不是这样：jsfiddle.net/gsss8c6L
— Clonkex
4

“输入”对我有用。 

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
— 山姆
source
3

您可以使用keydown，keyup并且keypress事件也是如此。

— 秋葵
source
3

若要跟踪每个示例，请在此示例之前进行操作，然后将光标闪烁速率完全降低为零。

<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其他作出反应

— 文卡特
source
1

在这里2018，这是我的工作：

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

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

— a20
source
2
此处为2019，每次按键将触发多次。有关示例，请参见此处：jsfiddle.net/sp00n82/3r4691tq/5
— sp00n
1

方法1：为添加一个事件侦听器input：

element.addEventListener("input", myFunction);

 

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

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

 

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

<input type="text" oninput="myFunction();">
— 皮卡曼德2
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.