一、网上vue中绑定回车事件的方法
在vue中绑定回车事件，我们有看到网上好多种的写法
1.第一种 @keyup.enter="submit"
<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">
2.第二种 @keyup.enter.native="submit"
<input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit">
3.第三种 给Document绑定keyup事件
$(document).keydown(function(event){
if(event.keyCode ==13){
$("#submit").click();
return false;
}
});
第一二种必须要获得焦点才能起作用，第三种看着还可以，但是经过测试发现在火狐浏览器中回车后如果有消息弹出再次回车会循环调用
二、现在的方案
- 给Document绑定keydown方法。看完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>vue中绑定回车事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
<div id="app">
<p>分数：<input type="text" id="test1" ref="test1"/></p>
<button id="submit" @click="submit">提交</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
created: function () {
this.keydownEnter();
},
methods: {
keydownEnter: function () {
this.$nextTick(function () {
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$("#submit").click();
return false;
}
});
})
},
submit: function () {
alert("提交了");
}
}
})
</script>
</html>