vue-ivew input 框回车搜索功能

转载于 2019-05-20 14:56:00 发布 · 749 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guangzhou11/p/10894151.html

文章标签：

#javascript #ViewUI

博客介绍了JavaScript中的键盘事件，主要有onkeydown（键盘按下时触发，按下不抬起会连续触发）和onkeyup（键盘弹起时触发），还指出只有能接收焦点、响应用户输入的元素才能接收键盘事件。

1. 添加事件

 <FormItem prop="user" label="产品ID:" :label-width="80">
              <Input type="text" v-model="formInline.productCode" @keydown.enter.native="searchEnterFun"></Input>
            </FormItem>

键盘事件主要有2个：

onkeydown : 键盘按下时触发,如果按下不抬起，那么会连续触发。

onkeyup : 键盘弹起时触发

不是所有元素都能接收键盘事件，只有能够响应用户输入的元素，换言之，能够接收焦点的元素就能接收键盘事件。

2.方法

searchEnterFun(e) {
        console.log(111);
        //which 和 keyCode 属性提供了解决浏览器的兼容性的方法。
        //keyCode属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
        var keyCode = window.event? e.keyCode:e.which;
        if (keyCode == 13) {
            this.getproductlist(1, 20);  //搜索事件
        }
     },