Tech Racho エンジニアの「?」を「!」に。
  • 開発

Vue.jsサンプルコード(36)Deleteキーで前のフィールドに戻って消す

36. Deleteキーで前のフィールドに戻って消す

  • Vue.jsバージョン: 2.5.2
  • 日本の携帯電話番号の入力を想定しています(3桁、4桁、4桁)。
  • フィールドに入力すると、桁数いっぱいになったときに次のフィールドにフォーカスが自動で移動します。
    • 最後のフィールドは桁数いっぱいに入力してもフォーカスは移動しません。
  • Deleteキーでフィールドの数字を消すと、前のフィールドにフォーカスが戻り、さらに1文字消します。
    • 最初のフィールドはDeleteキーですべて消してもフォーカスは移動しません。
  • 画面をリロードすると最初に戻ります。

サンプルコード

ポイント

前のフィールドに戻ったときに1文字消したくない場合は、以下の2か所の@keydown@keyupに変更します。

<input class="form-control" size="3" v-model="a" ref="r1" />
 -
<input class="form-control" size="4" v-model="b" ref="r2" @keydown.delete="b2" />
 -
<input class="form-control" size="4" v-model="c" ref="r3" @keydown.delete="b3" />

バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。