Vue進階（八十七）：VUE輸入框事件監聽blur與change的差異

人生箴言：感恩

積極 樂觀 健康 向上 陽光 大氣

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

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

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

輸入后值并沒有發生變更

這種情況是指，在沒有失焦的情況下，在輸入框內進行返回的刪除與輸入操作，但最終的值與原值一樣，這種情況下，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 :

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

比如：

1

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

Vue

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

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