vue.js项目 el | 您所在的位置:网站首页 › vue回车搜索 › vue.js项目 el |
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
发布时间:2020-08-27 23:23:07
来源:脚本之家
阅读:598
作者:Aimee芊
栏目:web开发
基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter 在methods方法集里,写上监听的方法,当获取的keyCode 为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值 searchEnterFun:function(e){ var keyCode = window.event? e.keyCode:e.which; // console.log('回车搜索',keyCode,e); if(keyCode == 13 && this.input){ this.$router.push({path:'/Share?keywords='+this.input}); } }which 和 keyCode 属性提供了解决浏览器的兼容性的方法。 keyCode属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码 注意: 在 Firefox 中,keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题,可以一起使用 which 和 keyCode 属性来解决: var keyCode = window.event ? e.keyCode:e.which; which 属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码 浏览器支持:谷歌、火狐、ie9、safari、欧朋 以上这篇vue.js项目 el-input 组件 监听回车键实现搜索功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持亿速云。 推荐阅读: vue.js监听键盘事件的案例 如何配置一个vue3.0项目免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 vue.js el-input 搜索 上一篇新闻:pyqt5对用qt designer设计的窗体实现弹出子窗口的示例 下一篇新闻:微信小程序mpvue点击按钮获取button值的方法 猜你喜欢 css如何实现transfrom的rotate属性在span标签下失效 sass和bootstrap有什么区别 HTML5怎样实现图片无限加载瀑布流效果 Shell逐行处理文本求和的示例分析 这么在Spring Cloud中使用Sleuth JavaScript运算符的示例分析 Java中原型模式的示例分析 JavaScript中回调、Promise和Async/Await的示例分析 2021最新TIOBE编程语言排行榜 Spring中如何进行日常Bug排查 |
CopyRight 2018-2019 实验室设备网 版权所有 |