当前位置: 首页 > 資訊 >

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

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

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

目前的程式碼

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>

Javascript 語法

// 傳送策略搜尋
, 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>

所增加的語法是 v-on:keyup.enter="SendStraSearch()",放在 的屬性裡面
接下來使用者輸入文字後按 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>

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

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

重點整理

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

相關學習文章

[Bootstrap + Vue.js + ASP.NET MVC] 增加欄位修改過程紀錄