Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装する【textarea,input】

Vue(Nuxt.js)で、textarea・inputで入力したものをEnterで送信、Shift+Enterで改行する機能を実装する方法です。

チャット機能を実装する時などに便利かと思います。

Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea
      v-model="message" 
      @keydown.enter.exact="keyDownEnter"  <!--enterをkeydownした時のイベント-->
      @keyup.enter.exact="keyUpEnter"  <!--enterをkeyupした時のイベント-->
      @keydown.enter.shift="keyEnterShift" <!--enterとshiftをkeydownした時のイベント-->
    ></textarea>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: ''
    }
  },
  methods: {
    keyDownEnter(e: any) {
      e.preventDefault() //改行を無効化
    },
    keyUpEnter(e: any) {
      e.preventDefault() // 改行を無効化
      console.log(e.keyCode) // 13
      this.send() //送信
    },
    keyEnterShift(e: any) {
      console.log('shift,enter')
    },
    send() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

@keydown.enter.exact
@keyup.enter.exact
のイベントに関しては、e.preventDefault()をすることでEnterで改行するのを防止しています。
また、.exactを連結させるとことで、Enterキーのみを押した時にイベントが発生するようにしています。

日本語変換時に送信しないように処理を追加

上記のコードでは、Enterで送信、Shift+Enterで改行することはできますが、日本語変換の確定をした時も送信されてしまいます。
日本語変換の確定時のEnterでは、送信しないように処理を追加します。

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea
      v-model="message"
      @keydown.enter.exact="keyDownEnter"
      @keyup.enter.exact="keyUpEnter"
      @keydown.enter.shift="keyEnterShift"
    ></textarea>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: '',
      keyDownCode: 0 //追加
    }
  },
  methods: {
    keyDownEnter(e: any) {
      console.log(e.keyCode)
      this.keyDownCode = e.keyCode //enterを押した時のkeycodeを記録
      e.preventDefault()
    },
    keyUpEnter(e: any) {
      if (this.keyDownCode === 229) { //229コードの場合は処理をストップ
        return
      }
      e.preventDefault()
      console.log(e.keyCode)
      this.send()
    },
    keyEnterShift(e: any) {
      console.log('shift,enter')
    },
    send() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

EnterキーのkeyCodeは13です。しかし、日本語変換確定時のEnterキーのkeyCodeは229になります。
if (this.keyDownCode === 229)で日本語確定時は処理を止めています。
これで日本語変換時には、送信しないようにする機能を追加できます。