vueでtextareaでtabを入力できるようにする

vueでtextareaを使うようなアプリケーションを作っていて、tab入力どうすればいいんだと思ったのでメモ。

基本的なやり方はjQueryでやる場合と同じで、textarea内のtabによるkeydownイベントをトリガーにして、既存の入力に\tを付け足して上書きすればいいだけです。

vueによるkeydownイベントの発火検知は、v-onディレクティブを使うことでできます。keyイベントのようなよく発生するイベントに対してはシンタックスシュガーがあってとても便利です。

以下がシンタックスシュガーを使わない版

<textarea v-on:keydown.9="実行する関数"></textarea>

シンタックスシュガーを使った版。わざわざkeyイベントの番号を指定するのも何なのでこちらのほうがいいと思います。

<textarea @keydown.tab="実行する関数"></textarea>

あとは、jQueryでやる場合と同じく\tで上書きすればいいだけです。こちらについては調べれば記事がたくさん出てくるのでそちらを見たほうがよいかと。

参考にしたのは以下です。

まとめ

便利なvueの機能のおかげで思ったよりも簡単にタブ入力ができるようになりました。調べ始めた時はjQueryでやるしかないのかと一瞬怯みましたが、vueで実現できてよかったです。 vueの細かい部分については以下のドキュメントを参考にしたので、他のことをやってみたいは見てみるといいかと思います。