vue-js-enter-evernt-0

[Vue.js] 欄位輸入後按 Enter 自動執行 (Enter Event)

示範一個簡單的功能,在網頁上有一個搜尋功能,搜尋欄右邊有執行的圖示。

標準的做法就是輸入文字後,按下右邊的放大鏡圖示後,就可以執行搜尋動作。
為了讓使用者更快速的執行,可以增加功能在使用者輸入完後按 Enter 鍵,也可以執行同樣的搜尋功能。

目前的程式碼

HTML 頁面語法

Javascript 語法

使用者按下搜尋圖示後,經由 v-on:click="SendStraSearch()" 就會觸發 SendStraSearch() 方法呼叫後端的搜尋。

增加鍵盤 Enter 觸發

在 Vue.js 的常用鍵盤觸發提供了 .enter 功能來抓 Enter 鍵的觸發事件,可以把 HTML 語法修改成

所增加的語法是 v-on:keyup.enter="SendStraSearch()",放在 <input> 的屬性裡面
接下來使用者輸入文字後按 Enter 鍵也會觸發 SendStraSearch() 這個方法。

鍵盤事件更多的說明

在 Vue.js 有相關的鍵盤觸發事件可參考 Vue.js

Vue.js 有相關的鍵盤觸發事件

在網頁上使用更多的鍵盤事件,可以幫助使用者快速的操作網站,因為同一功能如果一直重複做的話,能用鍵盤操作還是比較順手的。

同場加映另一種常用自動觸發功能

剛剛舉例了按 Enter 鍵就觸發,另一種我常用的事件是 onblur 事件,onblur 事件觸發時間點是離開焦點時觸發,
例如我正在搜尋欄位上輸入文字,然後滑鼠點了畫面上其他地方,離開輸入框的時候,就會觸發 onblur 事件。

修改後 HTML

增加的語法是 v-on:blur="SendStraSearch()"
v-on:keyup.enterv-on:blur 都可以放在一起使用或分開使用,
v-on:blur 的效果在按 Tab 換欄位時也可以觸發,通常可以用在檢查欄位是否正確輸入。

想要看到我修改的實例,可以參考我開發的網站,在網頁的上面有一個查詢功能,就是這個方法的實作。

重點整理

  1. v-on:click 是按鈕事件
  2. v-on:keyup.enter 是鍵盤 Enter 事件
  3. v-on:blur 是焦點離開事件

相關學習文章

如果你在學習上有不懂的地方,可以參考專業諮詢或線上家教服務,我想辨法解決你的問題
如果文章內容有錯誤的地方,幫我在下方留言通知我一下,謝謝
喜歡我的文章,請幫我在上方綠色拍手圖示按 5 下,也歡迎按月贊助,鼓勵我繼續創作,謝謝

加入社團一起討論

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

twenty − 19 =