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サンプルコード（04）双方向データバインディングを使ってみる
- Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
- Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
- Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
- Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
- Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
- Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
- Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
- Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
- Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
- Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
- Vue.jsサンプルコード（15）パスワードのマスクを解除する
- Vue.jsサンプルコード（16）パスワードを入力中だけ表示する
- Vue.jsサンプルコード（17）[いいね]ボタンを押すとボタンが文言に変わる
- Vue.jsサンプルコード（18）スター[★]を1回だけ押せるようにする
- Vue.jsサンプルコード（19）文字をクリックすると編集できるようにする
- Vue.jsサンプルコード（20）スター[★★★☆☆]をクリックして数値を1桁だけ入力する
- Vue.jsサンプルコード（21）[はい][いいえ]ボタンを押すと表示を変える
- Vue.jsサンプルコード（22）YouTube風の[👆][👇]ボタンで1度だけGood/Bad評価する
- Vue.jsサンプルコード（23）テキストフィールドの行数に応じて縦幅を自動拡張する
- Vue.jsサンプルコード（24）テキストフィールドの文章量に応じて縦幅を自動拡張する
- Vue.jsサンプルコード（25）クイズの答えをダイアログに入力しないと送信できないようにする
- Vue.jsサンプルコード（26）多数のアンケートを同一画面で順に表示する
- Vue.jsサンプルコード（27）選択肢に応じて入力項目を切り替える
- Vue.jsサンプルコード（28）文字の大きさをボタンで変更する
- Vue.jsサンプルコード（29）フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える
- Vue.jsサンプルコード（30）パスワードを自動生成する
- Vue.jsサンプルコード（31）パスワードの強度をバーで表現する
- Vue.jsサンプルコード（32）郵便番号に対応する地図を表示する
- Vue.jsサンプルコード（33）Vue.jsでAJAXを使う
- Vue.jsサンプルコード（34）逆ポーランド記法の電卓アプリを作る