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

JavaScript043

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

基于element-ui

组件

开发的vue.js项目，

实现回车键发起搜索，和原生的input

标签使用方法不一样：

el-input

监听键盘按下状态

得用@keyup.enter.native,如果是非el-input

组件，可以直接用@keyup.enter

<el-input

placeholder="搜索"

icon="search"

v-model="input"

:on-icon-click="pchandleIconClick"

@keyup.enter.native="searchEnterFun">

</el-input>

<input

placeholder="搜索"

type="text"

@keyup.enter="searchEnterFun">

在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文件中监听input输入事件（oninput）vue使用element-ui的el-input监听不了回车事件的解决方法vue点击input弹出带搜索键盘并监听该元素的方法

<html> 

<head>

 <script src="jquery-1.6.4.min.js"></script>

  <script>  

  function back(event){   

  event = event || window.event   

  if(event.keyCode==13){    

  event.returnValue = false    

  return false   

  }  

  } 

  </script> 

  </head> 

  <body> 

  <textarea rows="3" cols="40" id="te" onkeypress="back(event)"></textarea> 

  <textarea rows="3" cols="40" id="te1"></textarea> 

  </body> 

  </html>

一、设计思路：设计一个简单的输入对话框，然后按下enter进行输入事件。

二、聊天输入框的代码如下：

三、此时的页面展示如下：

四：设计函数，使得输入文字时，按下按钮可以提交到聊天框。

五、此时在页面上测试，输入一段文字：

六、执行结果如下：

七、设计函数，使得按下enter跟按钮同样的功能：

八、刷新页面，测试：