美文网首页
input事件 change事件

input事件 change事件

作者: malgee | 来源:发表于2023-04-10 09:36 被阅读0次

    在 HTML 中,<input> 元素用于创建用户可以输入的表单控件,例如文本框、复选框、单选框等。<input> 元素支持多种事件,其中两个常见的事件是 input 事件和 change 事件。

    • input 事件:在用户输入或粘贴文本时触发,表示文本框的值已经改变。
    • change 事件:在用户输入或粘贴文本并且焦点离开文本框时触发,表示文本框的值已经改变。

    两个事件的区别在于触发时机和触发条件不同。input 事件在文本框的值改变时就会触发,而 change 事件需要等到文本框失去焦点时才会触发;同时,input 事件还能在用户粘贴文本时触发,而 change 事件不会。

    <!DOCTYPE html>
    <html>
    <head>
      <title>Input and Change Events Example</title>
    </head>
    <body>
      <label for="myInput">Enter your name:</label>
      <input type="text" id="myInput">
      <p>Current value: <span id="myValue"></span></p>
      <script>
        var input = document.getElementById('myInput');
        var valueDisplay = document.getElementById('myValue');
        
        input.addEventListener('input', function(event) {
          console.log('Input event fired!');
          console.log('Current value:', event.target.value);
          valueDisplay.textContent = event.target.value;
        });
        
        input.addEventListener('change', function(event) {
          console.log('Change event fired!');
          console.log('Current value:', event.target.value);
          valueDisplay.textContent = event.target.value;
        });
      </script>
    </body>
    </html>
    
    

    在上面的示例中,我们创建了一个文本框和一个用于显示当前值的 <span> 元素,并为文本框绑定了inputchange 事件处理程序。当用户输入或粘贴文本时,input 事件会触发,我们可以通过 event.target.value 获取当前文本框的值,并更新 <span> 元素的内容;当用户离开文本框时,change 事件会触发,我们也可以获取当前文本框的值并更新 <span> 元素的内容。

    修饰符

    .lazy

    在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.lazy="msg" >
    

    相关文章

      网友评论

          本文标题: input事件 change事件

          本文链接:https://www.haomeiwen.com/subject/btwiddtx.html