[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 换栏位时也可以触发，通常可以用在检查栏位是否正确输入。

想要看到我修改的实例，可以参考我开发的网站，在网页的上面有一个查询功能，就是这个方法的实作。

重点整理

相关学习文章

[Bootstrap + Vue.js + ASP.NET MVC] 增加栏位修改过程纪录