詳解輸入框事件 blur 與 change 的差異

一、前言

blur與change事件在絕大部分情況下表現都非常相似，輸入結束后，離開輸入框，會先后觸發change與blur，唯有兩點例外。

1. 沒有進行任何輸入時，不會觸發change。

在這種情況下，輸入框并不會觸發change事件，但一定會觸發blur事件。在判斷表單修改狀態時，這種差異會非常有用，通過change事件能輕易地找到哪些字段發生了變更以及其值的變更軌跡。

2. 輸入后值并沒有發生變更。

這種情況是指，在沒有失焦的情況下，在輸入框內進行返回的刪除與輸入操作，但最終的值與原值一樣，這種情況下，keydown、input、keyup、blur都會觸發，但change依舊不會觸發。

二、延伸閱讀

vue運行為v-on在監聽鍵盤事件時，添加了特殊的鍵盤修飾符：

vue還非常貼心地給出了常用按鍵的別名，這樣就不必去記keyCode ~ ~

上面代碼，還可以在這樣寫：

全部的鍵盤別名如下：

.enter .tab .delete (捕獲 “刪除” 和 “退格” 鍵) .esc .space .up .down .left .right

還有一些組合按鍵：

.ctrl .alt .shift .meta(window系統下是window鍵，mac下是command鍵)

Alt + C :

Ctrl + Click :

注意:如果使用封裝組件的話，比如elementUI，這個時候使用按鍵修飾符需要加上.native。

比如：

@keyup.enter.native: 該事件與v-on:input事件的區別在于：input事件是實時監控的，每次輸入都會調用，而@keyup.enter事件則是在pc上需要點擊回車鍵觸發，而在手機上則是需要點擊輸入鍵盤上的確定鍵才可觸發。

三、拓展閱讀

《Vue進階（幺幺叁）：關于vue.js element ui 表單驗證 this.$refs[formName].validate()的問題》

《Vue進階（幺肆陸）：vue 輸入框中按enter鍵實現搜索或表單提交》

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。