【问题标题】:html text input onchange eventhtml文本输入onchange事件
【发布时间】:2011-09-04 09:21:48
【问题描述】:

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

【问题讨论】:

标签: javascript html textbox


【解决方案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 之间有很多选择。没有的建议相当具有误导性。最重要的是,从您的回答中也不太清楚这两件事实际上绑定到完全不同的事件。
      • 请参阅此以获得最新答案:stackoverflow.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();"
        />
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2014-06-21
          • 2010-12-14
          • 2017-07-10
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2023-02-21
          • 1970-01-01
          相关资源
          最近更新 更多