html文本输入onchange事件

Posted 2023-02-22

【中文标题】html文本输入onchange事件

【英文标题】：html text input onchange event

【发布时间】：2011-09-04 09:21:48

【问题描述】：

有没有办法实现一个文本更改事件来检测 html 输入文本字段上的文本更改？ 可以使用按键事件（按键等）来模拟这些事件，但是，它确实不是高性能和困难的，有没有更好的办法？

【问题讨论】：

请提供更多细节。你需要做什么——还没想好怎么做。例如，如果该字段接收来自条形码扫描仪的输入，那么我将监视该字段而不是使用 keyup/press 或 onchange

@mplugjan：用户输入文本框搜索查询，输出区域不断更新

请参阅此以获得最新答案：***.com/a/26202266/1211622

这能回答你的问题吗？ Best way to track onchange as-you-type in input type="text"?

【参考方案1】：

使用oninput 事件

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

【参考方案2】：

我使用这一行来监听来自 javascript 的输入事件。 它很有用，因为它侦听文本更改和文本粘贴事件。

myElement.addEventListener('input', e =>  myEvent() );

【参考方案3】：

当我做这样的事情时，我会使用 onKeyUp 事件。

<script type="text/javascript">
 function bar() 
      //do stuff
 
<input type="text" name="foo" onKeyUp="return bar()" />

但如果你不想使用 HTML 事件，你可以尝试使用 jQuerys .change() 方法

$('.target').change(function() 
   //do stuff
);

在这个例子中，输入必须有一个类“目标”

如果您要拥有多个文本框，当它们的文本被更改并且您需要它们的数据时，您希望执行相同的操作，那么您可以这样做：

$('.target').change(function(event) 
   //do stuff with the "event" object as the object that called the method
);

这样您就可以对使用同一类的多个文本框使用相同的代码，而无需重写任何代码。

【讨论】：

jquery的change事件是用keyup事件实现的吗？

@user775187 不，我认为这是它实现的 onChange 事件，因为您还可以将 change 事件用于单选按钮、选择列表、复选框等。

-1: “但如果你不想使用 html 事件，你可以尝试使用 jQuerys .change() 方法。”在 html 中使用 event 属性和使用 jQuery 之间有很多选择。没有的建议相当具有误导性。最重要的是，从您的回答中也不太清楚这两件事实际上绑定到完全不同的事件。

请参阅此以获得最新答案：***.com/a/26202266/1211622

【参考方案4】：

好吧，除非我误解你可以使用onChange 属性：

<input type="text" onChange="return bar()">

注意：在 FF 3（至少）中，直到某些用户通过单击远离元素、单击 Enter 或其他方式确认它们被更改后才会调用它。

【参考方案5】：

在您稍后失去焦点之前，onChange 不会触发。如果您想对各种瞬时变化非常严格，请使用：

<input
   type       = "text" 
   onchange   = "myHandler();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
/>