概要
前回、「blurイベントで特定のボタンだけでイベントをキャンセルするのに、event.relatedTargetが使えなかったとき。」 という記事で作ったものの動くサンプルをcodepenで晒してみよう。作っていたものは、ホワイトボード製で良くある行動予定表です。
環境
- CODEPENで書きなおしました。前回記事とメソッド名などに若干違いがあるかも。
- 外のサーバには繋いでいませんのでリロードするとデータが消えますが、怒らないでください。
仕様
- この会社には、幾つか支店があるとする。
- 支店ごとに社員名、予定が表示される。
- 名前か予定をクリック(タップ)すると予定を編集できる。
- 編集時に簡単に入力できるボタンを設ける。とりあえず「Meeting」がボタンで入力できる。
- UIに大きく変化はないが、PCでもモバイルでもなんとなく入力はできるようにする。
使い勝手を改善する
前回の記事で、モバイルから使った時のボタンのイベントが飛ばない、で悩みましたが、この対応をしたことで、編集状態からTABでフォーカスアウトするとボタンに移るので、blurイベントがキャンセルされてしまいます。そこで、TABによるフォーカス移動自体をキャンセルしてみることにしました。
code1.js
<v-text-field v-model="user.task" @keyup.enter="updateTask($event,user)" @keydown.tab="updateTask(null,user)" @blur="updateTask($event,user)" :ref="'edit' + user.id" :placeholder="user.name + 'さんの予定を入力'" single-line outline hide-details />
上記のように、@keydown.tabを追加し、@touchstart後の処理と同じような動きにして、TABしたら強制的に編集終了にしました。
コード
- こちらになります。
- モバイルではフルで触った方が想定通り動くかも。
See the Pen destination-board by loopsketch (@loopsketch) on CodePen.
最後に
- 何か誤りがあったら教えてください。出来る範囲で直します。
- Vue.jsもVuetifyも、ちゃっちゃとプロトタイプを作るのにいいですね。
- CODEPENも便利だなー。
- サーバ側も無料で使えるものがありそうなので、機会があったら晒してみますか。
参考
blurイベントで特定のボタンだけでイベントをキャンセルするのに、event.relatedTargetが使えなかったとき。