在 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>
元素,并为文本框绑定了input
和 change
事件处理程序。当用户输入或粘贴文本时,input
事件会触发,我们可以通过 event.target.value
获取当前文本框的值,并更新 <span>
元素的内容;当用户离开文本框时,change
事件会触发,我们也可以获取当前文本框的值并更新 <span>
元素的内容。
修饰符
.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
网友评论