Angular JS

JavaScript(AngularJS)で次のフォームへ自動で移動させる

  • このエントリーをはてなブックマークに追加
  • LINEで送る
AngularJSでWebシステム開発

クレジットカードの番号入力だったり、郵便番号であったり、フォームに一定の桁数を入力すると、自動で隣のテキストボックスへ移動できたら入力の手間が省けて便利です。
しかしAngular JSは基本的にDOM操作を一切しないし、するべきではありません。
Angular JSはAngular JS流のアプローチで、自動フォーム切り替え機能を実装してみましょう。とても簡単でした。

Directiveを使いこなせ

Angular JSの1つに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と書く必要があることに留意して下さい。

自動で次のテキストボックスへ移動する仕組み解説

まず上記のコードは、日付入力を想定したケースです。
月、日、という時刻を入力するテキストボックスが並んでいます。
月のテキストボックスで、2桁入力すると自動で隣のテキストボックス(つまり日のテキストボックス)へフォーカスが切り替わります。
Directiveの中で使うのはjQueryになります。

var inputLength = $("input").length -1; //テキストボックスの総数を取得
var num = $("input").index(this);//現在入力中のテキストボックスの番号

$("input")[num+1].focus();//実際の移動処理。入力中のテキストボックス+1のテキストボックスへfocusを移動します

jQueryがある程度読める方ならなんら難しくないコードです。
実は私はjQueryを触るのが久しぶりでかなり忘れていました。

next()で次のテキストボックスが取れない時もあります

テキストボックスが純粹にDOM上すぐとなりにあるような、極めてシンプルなケースであれば、

$(this).next.focus() 

で済んでしまうんですが、形を整形したりするためにtableやdivでくくったりすると、next()じゃ次のinput要素が取得できないみたいです。
正直jQueryは専門外なので詳しくはわからないのですが、とにかくnext()やnextAll()が使えるのは、textboxが横並びにDOM上ある場合に限るようです。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

AngularJS+BootStrapでサロンカルテを作りました

【作品例 サロンカルテ】
サロンカルテはAngular JSとBootStrap3を使って開発されたWebクラウドシステムの1つです。
強力なデータバインド機能のおかげで、お客様のカルテデータをサーバから取得、ng-repeatを使うだけで簡単に画面へ出力できたり、BootStrapで手軽におしゃれな画面が実装できます

サロンカルテのホームページ