从input输入完成后触发谈起

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”提示框。