Vue.jsサンプルコード(35)入力すると自動的に次のフィールドにフォーカスを進める

35. 入力すると自動的に次のフィールドにフォーカスを進める

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

サンプルコード

ポイント

HTML側でv-modelとともにrefで名前を付けておくと、後でthis.$refs.r2などと参照できるので便利です。

      <div class="col-md-10 form-inline">
        <input class="form-control" size="3" v-model="a" ref="r1" />
          -
        <input class="form-control" size="4" v-model="b" ref="r2" />
          -
        <input class="form-control" size="4" v-model="c" ref="r3" />
      </div>
    watch: {
      a: function(v) { if (v.length >= 3) { this.$refs.r2.focus() } },
      b: function(v) { if (v.length >= 4) { this.$refs.r3.focus() } },
    },

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

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

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

BPSアドベントカレンダー

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ