クレジットカードの番号入力だったり、郵便番号であったり、フォームに一定の桁数を入力すると、自動で隣のテキストボックスへ移動できたら入力の手間が省けて便利です。
しかしAngular JSは基本的にDOM操作を一切しないし、するべきではありません。
Angular JSはAngular JS流のアプローチで、自動フォーム切り替え機能を実装してみましょう。とても簡単でした。
Directiveを使いこなせ
Angular JSの１つにDirectiveという言葉があります。HTMLを拡張解釈させる機能のようですが正直とっつきにくいですよね。
ここで重要なのは、Directiveを使えば、自動でフォームのフォーカスを次へ移動させる事ができるということです。
Directiveについて詳しく知りたい方はQiitaの記事にわかりやすく書いてありますのでこちらをご覧下さい。
directiveで次のフォームへ移動する仕組みづくり
サンプルコード
.directive("nextFormFocus", function($log) {
return {
link: function($scope, element) {
element.on("input", function(e) {
if(element.val().length == element.attr("maxlength")){
var inputLength = $("input").length -1;
var num = $("input").index(this);
if(inputLength > num){
$("input")[num+1].focus();
}
}
});
}
}
})
HTMLの処理です
<form> <tr ng-repeat="roll in timeAry" > <td><input type="number" maxlength="2" next-form-focus ng-model="roll.month"></td> <td><input type="number" maxlength="2" next-form-focus ng-model="roll.day"></td> </tr> </form>
Directiveの注意点ですが、JavaScriptではキャメルケースですが、Htmlではハイフンに置き換わることです。
nextFormFocusというDirectiveは、Html上ではnext-form-focusと書く必要があることに留意して下さい。
自動で次のテキストボックスへ移動する仕組み解説
まず上記のコードは、日付入力を想定したケースです。
月、日、という時刻を入力するテキストボックスが並んでいます。
月のテキストボックスで、２桁入力すると自動で隣のテキストボックス（つまり日のテキストボックス）へフォーカスが切り替わります。
Directiveの中で使うのはjQueryになります。
var inputLength = $("input").length -1; //テキストボックスの総数を取得
var num = $("input").index(this);//現在入力中のテキストボックスの番号
$("input")[num+1].focus();//実際の移動処理。入力中のテキストボックス＋１のテキストボックスへfocusを移動します
jQueryがある程度読める方ならなんら難しくないコードです。
実は私はjQueryを触るのが久しぶりでかなり忘れていました。
next()で次のテキストボックスが取れない時もあります
テキストボックスが純粹にDOM上すぐとなりにあるような、極めてシンプルなケースであれば、
$(this).next.focus()
で済んでしまうんですが、形を整形したりするためにtableやdivでくくったりすると、next()じゃ次のinput要素が取得できないみたいです。
正直jQueryは専門外なので詳しくはわからないのですが、とにかくnext()やnextAll()が使えるのは、textboxが横並びにDOM上ある場合に限るようです。
