textarea实现回车发送，ctrl+enter换行

最新推荐文章于 2024-06-14 09:44:41 发布

夕若没落丶然寒曲兮

最新推荐文章于 2024-06-14 09:44:41 发布

阅读量3.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_41662119/article/details/103884692

版权

本文介绍了一种在前端开发中处理输入框键盘事件的方法，特别是如何捕捉并响应回车键事件，实现消息发送功能，同时提供了HTML和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

        <el-input
          type="textarea"
          autofocus="true"
          @keydown.native="handleKeyCode($event)"
          resize="none"
          v-model="messageTxt"
          maxlength="2000"
          show-word-limit
        >
        </el-input>

js:

// 键盘回车事件
    handleKeyCode(event) {
      if (event.keyCode == 13) {
        if (!event.metaKey) {
          event.preventDefault();
          this.handleTextSend();
        } else {
          this.messageTxt = this.messageTxt + '\n';
        }
      }
    },
// 发送消息