一、设计思路:设计一个简单的输入对话框,然后按下enter进行输入事件。
二、聊天输入框的代码如下:
三、此时的页面展示如下:
四:设计函数,使得输入文字时,按下按钮可以提交到聊天框。
五、此时在页面上测试,输入一段文字:
六、执行结果如下:
七、设计函数,使得按下enter跟按钮同样的功能:
八、刷新页面,测试:
基于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弹出带搜索键盘并监听该元素的方法
通过浏览器的调试工具(比如Chrome下有个开发人员工具,按F12可以唤出,在source里可以看到页面引用的js文件)去确定需要修改的代码位置;
修改代码,然后保存到本地
针对你最后一句,有个工具Fiddler恰恰能满足,借助它可以实现上一步的文件替换页面里原有的js文件。
难点在于定位代码的位置,如果页面里的代码被混淆了,读起来困难,会加大寻找位置的障碍。
关于Fiddler的用法:
到官网下载,大概800kb左右,可谓人小鬼大,是我们前端开发人员的利器。
打开后,右侧有个autoresponder,可以添加rules,设定匹配指定的某个请求url,将其指向本地文件,这样就不会访问服务器端的文件了。