こんちは、kijimaです。

さいきん案件でよく使うUIといえば、スクロールバーとテキスト入力フォーム。毎回過去の案件ファイルから引っ張りだしてきてコピペするのが面倒だったので、今回は備忘録としてテキスト入力フォームのサンプルFlashを作ってみました。

 

主な表示要素は、以下の三つ。

・テキスト入力欄（TextField）

・送信ボタン（MovieClip）

・残り入力可能文字数の表示欄（TextField）

 

テキスト入力フォームと送信ボタンを実装するにあたって、あると便利な機能としては、、

・文字入力数を制限したい

・あと何文字入力できるか表示したい

・スペース（全角・半角）のみ入力時は送信させない

 

とこんな感じかな、と。さっそく実装してみました。

で、完成物がこちら。

 

 

コード記述部分はこんな感じ。ドキュメントクラスひとつだけです。

 

package {

	import flash.display.Sprite;
	
	import flash.events.Event;
	import flash.events.TextEvent;
	import flash.events.MouseEvent;

	public class Index extends Sprite {
		//ステージ上に配置しているもの
		//public var inputForm:TextField;
		//public var remainCount:TextField;
		//public var submitBtn:MovieClip;
		
		//制限文字数
		static const MAX_CHAR:int = 100;
		
		//コンストラクタ
		public function Index():void {
			setInitInputForm();
			checkTextNum();
		}
		
		//初期設定
		private function setInitInputForm():void {
			stage.focus = inputForm;
			inputForm.maxChars = MAX_CHAR;

			inputForm.addEventListener(TextEvent.TEXT_INPUT, checkTextNum);
			inputForm.addEventListener(Event.CHANGE, checkTextNum);
			submitBtn.buttonMode = true;
			submitBtn.addEventListener(MouseEvent.CLICK, submitForm);
		}
		
		//送信ボタンがクリックされたとき
		private function submitForm(e:MouseEvent):void {
			trace("submitBtn CLICK!!!");
		}
		
		//テキストフィールドの内容に変更があるたびに文字数をチェック
		private function checkTextNum(e = null):void {
			var t:String = inputForm.text;
			var btn:MovieClip = submitBtn;
			remainCount.text = "あと " + String( MAX_CHAR - t.length ) + "文字入力できます";
			if ( t.length < 1 || spaceCheck(t) ) {
				btn.gotoAndStop("_disabled");
				btn.mouseEnabled = false;
			} else {
				btn.gotoAndStop("_up");
				btn.mouseEnabled = true;				
			}
		}
		
		//全角、半角スペースのみ入力されているかチェック
		private function spaceCheck(t:String):Boolean {
			var len:int = t.length;
			var arr:Array = [];
			for (var i:int = 0; i < len; i++) {
				if (t.charAt(i) == " " || t.charAt(i) == "　" || escape(t.charAt(i)) == "%0D") continue;
				arr.push(t.charAt(i));
			}
			return (arr.length < 1)
		}
	}
}

 

ポイントとしては、キー入力のイベントを監視する「TextEvent.TEXT_INPUT」だけでは、「Delete」キーが押されたことが通知されないので、「Event.CHANGE」リスナーも設定してやるところでしょうか。

使う機会があれば、ご自由にお使いください〜。

・ソースコード一式（CS3形式、AS3）