局部使用
原生js和vue的input版
//js
<input v-on:keyup.13="onSubmit">
//vue
<input @keyup.enter="onSubmit">
如果失效:
//有时候前两种会出现失效,加上 .native 修饰即可
@keyup.enter.native="onSubmit"
示例:(element-ui中具体使用)
// 在组件中使用的示例
// 在局部中定义enter事件只有鼠标位于输入框中才能按下enter键触发事件
<el-form-item>
<el-input @keyup.enter.native="onSubmit" type="password" v-model="form.password" placeholder="用户密码" prefix-icon="el-icon-lock"></el-input>
<el-link type="info" :underline="false" @click="findPassword">忘记密码?</el-link>
</el-form-item>
全局使用
整个页面中生效
// vue中使用
// 只需要将下方注释的触发事件处的事件改为你想使用enter触发事件的函数名即可
created () {
var that = this
document.onkeydown = function (e) {
var key = window.event.keyCode
if (key === 13) {
that.onSubmit() // 触发事件
}
}
},
版权声明:本文为qq_44774831原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。