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 是焦點離開事件

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG