前端工程师在开发时，经常会遇到这样的需求，产品要求用户在input框输入完内容后按enter键自动提交表单到后台，不需要单击“保存”按钮再提交，以提高用户体验，接来下会分别介绍在JS、JQ、Vue中如何给input绑定Enter回车事件
键盘事件
键盘事件触发次序：①onkeydow ②onkeypress ③onkeyup
| 属性 | 描述 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
keyCode对照表
JS给input绑定Enter回车事件
<body>
<form action="#" onsubmit="return false">
<input placeholder="请输入用户名" type="text" onkeydown="myFunction()">
</form>
<script type="text/javascript">
// 按下enter键，发送请求，回车键的键值为13
function myFunction() {
if(event.keyCode==13) {
alert('发送成功！');
}
}
</script>
</body>
JQ给input绑定Enter回车事件
<body>
<form action="">
<input type="text" class="inputValue">
</form>
<script>
$('.inputValue').bind('keypress', function (event) {
if (event.keyCode == "13") {
alert('你输入的内容为：' + $('.inputValue').val());
}
})
</script>
</body>
Vue（结合Element UI框架）给input绑定Enter回车事件
<template>
<el-form :model="roomForm" @submit.native.prevent>
<el-form-item class="templateName">
<el-input @keyup.native.enter="handleDialogSelectRoom" v-model="roomForm.templateName" placeholder="请输入功能室名称"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
roomForm: {
templateName: ''
}
}
},
methods: {
handleDialogSelectRoom() {
console.log(this.roomForm.templateName)
}
}
}
</script>
文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
网友评论