input输入框，作为前端开发中最常见的用户输入方式之一，一直以来都是前端开发中的热门话题。其中，用户输入完成后触发事件更是input输入框的重要功能之一。那么，从哪些维度来阐述input输入完成后触发这一事件呢？
一、 input输入完成后触发
input输入完成后触发是input输入框最常见的事件之一，也是最为基础的。当用户在input输入框中完成输入并点击“确认”或按下“enter”键时，就会触发该事件。
<input type="text" id="input1" onblur="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("input1");
x.value = x.value.toUpperCase();
}
</script>
上述代码使用了onblur事件，即当input框失去焦点时触发myFunction函数，在函数中将输入的小写字符转换为大写字符。这是一种常见的应用场景。
二、 input输入完成后触发 Vue
Vue是一款流行的前端框架，常用于构建单页应用中的input输入框。在Vue框架中，可以通过v-on指令绑定input的change事件或者input事件来触发input输入完成后的操作。
<div id="app">
<input v-model="message" @change="handleInputChange" />
</div>
<script>
new Vue({
el: "#app",
data: {
message: ""
},
methods: {
handleInputChange: function(event) {
console.log(event.target.value);
}
}
});
</script>
上述代码通过v-model指令绑定了message属性到input框中，在输入内容改变时会触发handleInputChange方法，控制台将会输出用户输入的内容。
三、 input输入文字触发事件
input输入框中，有时候我们希望用户在输入文字时就触发事件，而不必等到用户输入完成才触发。这时候就可以使用oninput事件。
<input type="text" id="input2" oninput="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("input2");
x.value = x.value.toUpperCase();
}
</script>
当用户在这个input输入框中输入一个字符时，就会触发myFunction函数，将输入的小写字符转换成大写字符并显示在输入框中。
四、 input输入内容改变触发选取
在某些应用场景中，需要对用户输入进行特殊的选择和处理。这时候，就可以使用onchange事件来触发选中。
<input type="checkbox" id="myCheck" onchange="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myCheck").checked;
if (x==true) {
alert("Checkbox is checked..");
} else {
alert("Checkbox is not checked..");
}
}
</script>
上述代码通过使用onchange事件，在复选框选中时弹出“Checkbox is checked”提示框，在取消选中时弹出“Checkbox is not checked”提示框。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304918.html
微信扫一扫 
支付宝扫一扫 