Element UI的组件el-input添加回车键监听事件

纵观Element UIde input输入框组件(el-input组件),都没有发现可以给输入框添加的回车键监听事件,因为Element UI对其做了进一步封装,对比原生HTML的input标签的监听键盘(回车键)事件:

 // 回车提交表单
document.onkeydown = function (e) {
	// 兼容FF和IE和Opera
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
        console.log('这是ASCII码为13的按键:回车键的监听事件。同理,别的按键监听只需更换这个按键对应的ASCII码值即可。')
    }
}

直接添加onkeydown(或者@keyup.enter)是无效的。

要想在el-input中实现回车键监听事件,需要在@keyup.enter后面加上.native,即:

<el-input type="password" v-model="inputData" @keyup.enter.native="submitForm()" placeholder="Please enter your password"></el-input>

参考链接:
vue使用elementUI的el-input监听回车事件
js中回车触发事件
ASCII码表

欢迎大家一起讨论、学习

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值