elementui回车事件（vue.js项目 el-input 组件 监听回车键实现搜索功能示例）

本文目录

• vue.js项目 el-input 组件 监听回车键实现搜索功能示例
• 回车事件 DIV列表
• 2020-07-05 elementui系列：input回车事件，阻止原生刷新页面事件，slot
• elementui+vue输入框回车事件与失去焦点事件重叠
• 如何在网页中绑定回车键事件
• elementuiinput不识别换行符
• element-ui el-input回车页面刷新

vue.js项目 el-input 组件 监听回车键实现搜索功能示例

基于element-ui组件开发的vue.js项目，实现回车键发起搜索，和原生的input标签使用方法不一样：el-input监听键盘按下状态得用@keyup.enter.native,如果是非el-input组件，可以直接用@keyup.enter《el-inputplaceholder="搜索"icon="search"v-model="input":on-icon-click="pchandleIconClick"@keyup.enter.native="searchEnterFun"》《/el-input》《inputplaceholder="搜索"type="text"@keyup.enter="searchEnterFun"》在methods方法集里，写上监听的方法，当获取的keyCode为13时，表示按下了回车键，如果需要监听空格或者其他键，换成别的键值searchEnterFun:function(e){varkeyCode=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属性来解决：varkeyCode=window.event?e.keyCode:e.which;which属性返回onkeypress事件触发的键的值的字符代码，或者onkeydown或onkeyup事件的键的代码浏览器支持：谷歌、火狐、ie9、safari、欧朋以上这篇vue.js项目el-input组件监听回车键实现搜索功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。您可能感兴趣的文章:详解.vue文件中监听input输入事件（oninput）vue使用element-ui的el-input监听不了回车事件的解决方法vue点击input弹出带搜索键盘并监听该元素的方法

回车事件 DIV列表

用获取焦点的也可以啊。keydown 方法吧？好像是 回车键13也就是如果按了回车就把焦点设置到下一个控件上

2020-07-05 elementui系列：input回车事件，阻止原生刷新页面事件，slot

1.监听原生input的话使用 @keyup.enter ，封装组件比如elementui的话就要这么写： @keyup.enter.native 2.在 vue+elementui 中只有一个 el-input 的情况下，回车会提交表单，在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交 3. 《span slot="append"》

elementui+vue输入框回车事件与失去焦点事件重叠

产生的bug：点击回车提示信息重叠 原因：点击回车同时触发回车事件和失去焦点事件解决办法：在回车事件中调用失去焦点事件@keyup.enter.native="$event.target.blur"      @blur="handleInputConfirmTwo"

如何在网页中绑定回车键事件

标题通俗的说，也就是绑定当用户按下回车键要执行的事件。解决方法比较简单，很多人都知道，本不应献丑的，但由于前几天的开发中有这个需求，做出来后觉得还是挺实用的，故还是记录下来。在介绍本方法前，应该先说明，除了本方法外，其实还可以通过设定按钮的焦点的方法来绑定回车事件的，不过这不属于本文范围，故避开不谈。下面，入正题。第一步，先编写简单的页面代码，这里我们只需要一个按钮就足够了。当然，还有按钮事件。《html《head《title测试绑定enter《/title《script type="text/javascript"function b_onclick(){alert("你好！");}《/script《/head《body《input type="button" value="测试按钮" id="test" onclick="b_onclick()" /《/body《/html第二步，于b_onclick()函数加入如下js代码：function document.onkeydown(){//使用document.getElementById获取到按钮对象var button = document.getElementById("test");if(event.keyCode == 13){button.click();event.returnValue = false;}}然后于IE中运行，你会发现，即使焦点不在按钮上，当你按下回车，依然执行了按钮的函数。稍微解释一下代码：event.keyCode == 13是判断按下的是那一个间，13代表的是回车键。button.click();执行按钮事件。event.returnValue = false;这个是为了防止浏览器捕捉到用户按下回车键而进行其他操作。例如假如输入框中，没有这行代码的话，在执行完按钮事件后，其还会执行换行的动作。第三步，很多人都认为做完上面的工作已经完成了整个作业。其实不是的。你尝试使用firefox浏览，就会发现，代码并不会执行。显然，这是因为firefox不支持event事件对象。为了做到跨浏览器，不得不将代码进行优化。我们可以这个做：首先，为boby添加一个onkeydown监控函数，如《body onkeydown="BindEnter(event)"。其次修改原来的绑定函数为：function BindEnter(obj){//使用document.getElementById获取到按钮对象var button = document.getElementById(’test’);if(obj.keyCode == 13){button.click();OK，到这里已经基本完成了。完整代码如下：《html《head《title测试绑定enter《/title《script type="text/javascript"function b_onclick(){alert("你好！");}function BindEnter(obj){//使用document.getElementById获取到按钮对象var button = document.getElementById(’test’);if(obj.keyCode == 13){button.click();《input type="button" value="测试按钮" id="test" onclick="b_onclick()" /《/body《/html水平有限，如有错漏，还请指正。

elementuiinput不识别换行符

是。在elementuiinput软件中不支持识别换行符键盘，换行符通常出现在从网页复制Word的文字中，是Word中的一种换行符号，又叫作软回车。

element-ui el-input回车页面刷新

原因： 1.默认情况下，单个输入框，无论按钮的type="submit/button"类型，回车即提交 2.当按钮的type="submit"时，无论几个输入框，回车均提交 3.当按钮的type="button"时，存在多个输入框，回车不提交 解决： 在el-form中写一个属性：@submit.native.prevent即可解决了。