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