HolleBug
HolleBug

Vue使用Alt + Enter键替代Enter键回车，enter发送消息

因为要做一个聊天输入框，所以遇到了这个问题，因为发送消息比回车换行要常用，所以用enter键发送消息，alt+enter键回车换行

首先先给文本输入框加两个键盘事件

<textarea @key.enter="onSend" @key.alt.enter="onEnter"></textarea>

然后你会发现当你使用alt+enter组合键时，你仍然会触发enter事件，这当然不符合我的要求，所以我的做法是，在使用alt+enter键时，阻塞enter键的触发事件

onEnter () {
      this.textarea += '\n' // 加入回车当然这个回车只会加在文本末尾，如果你想要在文本随意地方插入请参考我的另一篇表情包博文的源码
      this.isAltEnter = true //设置 阻塞状态
    }
    onSend () {
      // 发送文本和表情消息
      setTimeout(item => {
        if (this.isAltEnter) {//如果为阻塞状态就反转状态
          this.isAltEnter = false
        } else {//如果不是就执行发送
          let val = this.textarea.replace(/[\r\n]/g, '').trim()
          if (val) {
            this.toSend(this.textarea, 1)
            this.addResult(true, this.textarea, 1)
            this.textarea = ''
          }
        }
      }, 100)
    },

你可能感兴趣的:(WEB前端)