Vue.jsで，textarea内でEnterキーが押された時の挙動を変える方法

HTMLのtextarea要素にフォーカスが当たった状態でEnterキーが押された場合の挙動を変えたい場合がある。

何もしなければtextarea要素内で改行されるだけだけど，この挙動を無くし，代わりにフォーカスを移動したりモーダルを閉じるなどの処理を行いたい場合などがそうだ。

気を付けること

• Enterキーが押されたことを検知するためにはkeyupイベントを拾うだけでは不十分。
  • keyupイベントが発火したタイミングでは既にEnterキーのデフォルトの動作（改行）が既に行われた後となってしまうため，keyupイベントよりも前に発火するkeydownイベントのデフォルトの動作をキャンセルしておく必要がある。
• 一般的な操作の慣例上，Shift+Enterキーではtextarea内で改行できるようにしておくと良い場合が多い，と思う。

コード例

template

<textarea
    v-model="textdata"
    v-on:keydown.enter.exact.prevent
    v-on:keyup.enter.exact="MoveFocus"
    v-on:keydown.enter.shift.exact="NewLine"
  >
  </textarea>

methods

...（略）...
methods: {
    MoveFocus() {
        // TODO: Enterキー押下時に必要な処理（例：フォーカス移動）を行う。
    },
    NewLine() {
        // 改行処理の例
        this.textdata = `${this.textdata}\n`;
    },
},
...（略）...