el-input 监听键盘回车事件，且不触发换行

最新推荐文章于 2026-04-25 09:14:35 发布

原创最新推荐文章于 2026-04-25 09:14:35 发布 · 4.4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

却也1029

关注

标签

#vue.js #javascript #ecmascript

分类前端开发

收录于

需求分析：

此次的需求为 el-input 输入框需要添加回车一键录入数据提交的功能
话不多说，我们直接上干货

HTML 代码：

我使用的是文本域输入框，都一样哈，标签使用 keydown 事件监听，如下：

<el-input
  type="textarea"
  :autosize="{minRows: 3}"
  placeholder="请输入内容"
  v-model="orderInfo"
  @keydown.enter.native="enterEvent($event)"
 >
 ></el-input>

JavaScript 代码：

// 快捷录入-回车事件
enterEvent(event) {
  if (!event.ctrlKey) {
    // 如果没有按下组合键ctrl，则会阻止默认事件
    event.preventDefault();
    this.test();
  } else {
    // 如果同时按下ctrl+回车键，则会换行
    this.orderInfo += '\n';
  }
},
// 测试事件
test(){
  console.log('触发了回车事件，并且没有换行喔~');
}