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

HTML, JavaScript, Vue.js, Web

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`;
    },
},
...(略)...