Vue.js中如何阻止Shift+Enter触发时添加换行符(\n)

核心问题分析 #

按下Shift+Enter时，浏览器默认会在textarea中插入换行符（\n），原代码用keyup事件触发提交，此时默认行为已经完成，preventDefault()无法阻止换行符被插入，导致发送的消息末尾多了\n。另外，原代码中每次keyup都会重复绑定事件监听器，存在潜在bug。

解决方案 #

1. 将Shift+Enter的触发事件从keyup改为keydown，提前阻止浏览器插入换行的默认行为
2. 把重复绑定的keyup事件移到组件初始化阶段，避免多次绑定
3. 可选：发送前清理输入内容末尾的换行（如果需要）

修改后的代码 #

HTML部分

<textarea
     rows="1"
     id="roomTextarea"
     ref="roomTextarea"
     v-model="messageInput"
     :placeholder="$t('containers.admin.chat.chatPlaceholder')"
     class="room-footer-reply-textarea"
     @keyup="onChangeInput"
     @keydown.enter.shift.exact.prevent="checkSubmitKey"
     @click.self="checkmarkSeen"
     @paste="onPasteClipboard"
 />

JavaScript部分

// 组件初始化时绑定一次keyup事件，避免重复绑定
mounted() {
  const textareaEl = this.getTextareaRef();
  textareaEl.addEventListener("keyup", (e) => {
    this.handlesaveDraftMessages();
    if (e.key === "Enter" && !e.shiftKey && this.isEnterSubmit) {
      this.sendMessage();
      this.resizeTextarea();
    }
  });
},

checkSubmitKey() {
  if (!this.isEnterSubmit) {
    // 可选：如果需要移除末尾换行，用trimEnd()处理
    // const message = this.messageInput.trimEnd();
    // this.sendMessage(message);
    
    this.sendMessage();
    // 发送后清空输入框（按需添加）
    this.messageInput = "";
    this.resizeTextarea();
  }
},

onChangeInput() {
  this.resizeTextarea();
},

resizeTextarea() {
  const el = this.getTextareaRef();

  if (!el) {
    return;
  }

  el.style.height = "auto";
  let newHeight = el.scrollHeight;
  el.style.height = `${newHeight}px`;
},

关键说明 #

• 事件时机调整：keydown事件在按键按下时立即触发，此时调用preventDefault()可以直接阻止浏览器插入换行符，从根源解决末尾加\n的问题。
• 避免重复绑定：原代码中每次keyup都会给textarea添加新的监听器，会导致同一操作被执行多次，移到mounted中只绑定一次即可解决。
• 内容清理可选：如果业务允许发送带换行的消息，不需要额外处理；如果要求消息末尾无换行，添加trimEnd()即可。

内容的提问来源于stack exchange，提问作者hoangnv