Edited at

[Vue]WEBアプリのショートカット機能の実装で、Vueのシステム修飾子を使おうとしたら、ものすごく微妙だった件


今日のコード


See the Pen
[Vue]システム修飾子サンプル
by riotam (@riotam4)
on CodePen.

必ず入力欄を選択した状態で、「alt + c」を入力してください。


解説

v-onディレクティブの、特殊な書き方の1つ。

任意のキーをキーアップした際に、v-onディレクティブでtestメソッドを発火してくれます。

なお、任意のキーというのは「alt.67」の部分で指定されていて、今回であれば「alt」と「c(=67)」と指定されている。

また、キーアップは押下した瞬間ではなく、厳密には押して離した瞬間になります。


ショートカット割り当てに微妙な件

システム修飾子を使った機能は直感的に実装できるし、便利そうだなと感じたのですが、実はこれ、入力欄を選択していないと実行できません

ディレクティブがinputタグに付いているので、それもそうかと思い、divタグに付けてみると、起動してくれませんでした…残念

色々試してみたところ、buttonタグなどの一部のタグでは起動できるのですが、基本的にinputタグぐらいでしか起動してくれない様子

そのため、ショートカットとして使うには、このディレクティブを仕込んだinputタグ(入力欄)を選択した上でショートカットを押してもらう必要があります。

マウスを使わないで良いようにするために、ショートカットを実装したいのに…残念


それでも、なんとかショートカットとして使うとしたら…

focusメソッド等を使って、ページを開いた瞬間に、ディレクティブを仕込んだinputタグにフォーカスさせる…みたいなことで対応できなくはないかと。

でも、それ、なんか…ねぇ…って感じですよね。


結論

そもそも、このシステム修飾子はショートカット割り当てとして使うべきものではなかったのかもしれないです。

じゃあ、どういうときを想定しているのだろうか。

使い方間違っているよ!等々、何かありましたら、ぜひコメントください。

最後までありがとうございました。