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

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

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

Contents

1 目前的程式碼
2 增加鍵盤 Enter 觸發
- 2.1 鍵盤事件更多的說明
3 同場加映另一種常用自動觸發功能
4 重點整理

目前的程式碼

HTML 頁面語法

<div class="input-group">
	<input type="text" class="form-control" id="F_KEYWORD" v-model="form.F_KEYWORD.value" placeholder="@Resources.Language.搜尋策略">
	<span class="input-group-btn">
		<button type="button" class="Searchbtn btn btn-flat" v-on:click="SendStraSearch()"><i class="fa fa-search"></i></button>
	</span>
</div>

</span>

</div>

Javascript 語法

// 傳送策略搜尋
, SendStraSearch: function () {
	var self = this;
	var queryStr = self.form.F_KEYWORD.value;

	alert('執行搜尋動作');
}

// 傳送策略搜尋

, SendStraSearch: function () {

var self = this;

var queryStr = self.form.F_KEYWORD.value;

alert('執行搜尋動作');

}

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

增加鍵盤 Enter 觸發

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

<div class="input-group">
	<input type="text" class="form-control" id="F_KEYWORD" v-model="form.F_KEYWORD.value" placeholder="@Resources.Language.搜尋策略" v-on:keyup.enter="SendStraSearch()">
	<span class="input-group-btn">
		<button type="button" class="Searchbtn btn btn-flat" v-on:click="SendStraSearch()"><i class="fa fa-search"></i></button>
	</span>
</div>

</span>

</div>

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

鍵盤事件更多的說明

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

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

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

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

修改後 HTML

<div class="input-group">
	<input type="text" class="form-control" id="F_KEYWORD" v-model="form.F_KEYWORD.value" placeholder="@Resources.Language.搜尋策略" v-on:keyup.enter="SendStraSearch()" v-on:blur="SendStraSearch()">
	<span class="input-group-btn">
		<button type="button" class="Searchbtn btn btn-flat" v-on:click="SendStraSearch()"><i class="fa fa-search"></i></button>
	</span>
</div>

</span>

</div>

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

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

重點整理

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

目前的程式碼

增加鍵盤 Enter 觸發

鍵盤事件更多的說明

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

重點整理

相關學習文章