javascript 如何防止在vuejs中按Shift + Enter时添加\n的操作

7kqas0il  于 2022-12-17  发布在  Java
关注(0)|答案(1)|浏览(268)

我使用文本区输入文本,每次发送文本时,我必须按Shift + Enter
但是发送文本时,它会在末尾添加/n,我使用的是Enter换行符键,而不是submit

例如:您好=〉您好\n

未选择的图像通过回车键发送:x1c 0d1x这里是我的代码:

checkSubmitKey() {
      if (!this.isEnterSubmit) {
        this.sendMessage();
      }
    },
    
    
    onChangeInput() {
      this.getTextareaRef().addEventListener("keyup", (e) => {
        this.handlesaveDraftMessages()
        if (e.key === "Enter" && !e.shiftKey && this.isEnterSubmit) {
          this.sendMessage();
          this.resizeTextarea();
        }
      });
      this.resizeTextarea();
    },
    
    
    resizeTextarea() {
      const el = this.getTextareaRef();

      if (!el) {
        return;
      }

      el.style.height = "auto";
      let newHeight = el.scrollHeight;
      el.style.height = `${newHeight}px`;
    },
<textarea
     rows="1"
     id="roomTextarea"
     ref="roomTextarea"
     v-model="messageInput"
     :placeholder="$t('containers.admin.chat.chatPlaceholder')"
     class="room-footer-reply-textarea"
     @keyup="onChangeInput"
     @keyup.enter.shift.exact.prevent="checkSubmitKey"
     @click.self="checkmarkSeen"
     @paste="onPasteClipboard"
 />

我如何解决以上问题
谢谢您的帮助!

x4shl7ld

x4shl7ld1#

使用keydown事件,而不是keyup,然后使用preventDefault(),同时按Enter键而不按shift键:

document.querySelector('textarea').addEventListener('keydown', e => {
  if(e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    console.log('send:', e.target.value);
  }
});
<textarea></textarea>

相关问题