Flex TextInputで数値のみ入力でき、カンマ区切りにするサンプル ホームページ制作 | 墨田区

Flex TextInputで数値のみ入力でき、カンマ区切りにするサンプル

LINEで送る
Pocket

Flex(AIR) にて、テキストボックスを配置する場合、TextInput コントロールを利用しますが、今回は、「数値だけしか入力することがなく、入力したらカンマ区切りにする方法」をご紹介したいと思います。

サンプル


別ウィンドウで表示する場合は こちら をクリックしてください。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・



入力値の制御

TextInputrestrict プロパティを使うことで、ユーザーの入力を制限することができます。今回は数値のみなので、restrict = "^a-z\A-Z\-\u0009" とします。さらに、imeMode = "ALPHANUMERIC_HALF"; と、IME.enabled = false; も設定し、全角文字の入力ができないように制限します。

ソース

それでは、実際のソースを見ながら解説してきます。

NumericTextInput.as

TextInput クラスを継承した NumericTextInput を用意しました。
package
{
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.system.IME;

	import mx.controls.TextInput;
	import mx.formatters.NumberFormatter;

	/**
	 * TextInput for Numeric input.
	 */
	public class NumericTextInput extends TextInput
	{
		/**
		 * クリック時、初回のみ選択状態にする
		 */
		private var firstClickFlg:Boolean = true;

		/**
		 * コンストラクタ
		 */
		public function NumericTextInput()
		{
			super();
			// 入力キーの制御
			this.restrict = "^a-z\A-Z\-\u0009";
			// テキストを選択状態に設定
			this.addEventListener(MouseEvent.CLICK, function(event:Event):void {
				if ( event.currentTarget.text != "" && event.currentTarget.text != undefined ) {
					// 初回のみ選択状態を作る
					if ( this.firstClickFlg )
						event.currentTarget.setSelection(0, event.currentTarget.length);
					this.firstClickFlg = false;
				}
			});
		}

		/**
		 * 小数点以下の表示設定
		 */
		private var _precision:int = 0;

		public function set precision(precision:int):void {
			this._precision = precision;
		}

		public function get precision():int {
			return this._precision;
		}

		/**
		 *  @private
		 *  Gets called by internal field so we draw a focus rect around us.
		 */
		override protected function focusInHandler(event:FocusEvent):void {
			super.focusInHandler(event);
			// カンマ区切りを解除
			if ( event.currentTarget.text != "" )
				event.currentTarget.text = Number(this.text.replace(new RegExp(",", "g"), "")).toString();
			// テキストを選択状態に設定
			if ( event.currentTarget.text != "" && event.currentTarget.text != undefined )
				event.currentTarget.setSelection(0, event.currentTarget.length);
			this.firstClickFlg = false;
		}

		/**
		 *  @private
		 */
		override protected function keyDownHandler(event:KeyboardEvent):void {
			super.keyDownHandler(event);
			this.imeMode = "ALPHANUMERIC_HALF";
			IME.enabled = false;
		}

		/**
		 *  @private
		 *  Gets called by internal field so we remove focus rect.
		 */
		override protected function focusOutHandler(event:FocusEvent):void {
			super.focusOutHandler(event);
			if ( event.currentTarget.text != "" ) {
				var nf:NumberFormatter = new NumberFormatter();
				nf.useThousandsSeparator = true;
				// 小数点以下の設定
				nf.precision = _precision;
				// マイナスの表示許可
				nf.useNegativeSign = true;
				event.currentTarget.text = nf.format(event.currentTarget.text);
			}
			this.firstClickFlg = true;
		}
	}
}

コンストラクタ

restrict = "^a-z\A-Z\-\u0009" を記述し、入力を制限します。
以前、こちら でもご紹介しましたが、マウスでクリックされたときに、入力値がある場合は、選択状態を作りたかったので、setSelection を使って、テキストを選択状態にしています。

precision プロパティ(小数点以下の表示設定)

小数点の表示桁数は、外部から設定させたかったので、precision プロパティを用意しています。デフォルトは 0 (小数点以下表示なし)です。

フォーカスインイベントハンドラ(focusInHandler)

ここでは、次の入力がしやすいように、入力値のカンマ区切りを解除しています。また、こちらもテキストを選択状態にしています。

キーダウンイベントハンドラ(keyDownHandler)

this.imeMode = "ALPHANUMERIC_HALF"; と、IME.enabled = false; を設定し、全角文字の入力制御をしています。

フォーカスアウトイベントハンドラ(focusOutHandler)

ここでは、NumberFormatter.useThousandsSeparator を利用して、3ケタのカンマ区切りをしています。マイナス入力も許可するために、useNegativeSign = true; に設定しています。

NumericTextInputTest.mxml

表示する画面は以下の通りです。画面デザインを整えるために、css を用意しています。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   xmlns:local="*"
					   initialize="onInit()"
					   width="600"
					   height="80"
					   >
	<fx:Script>
		<![CDATA[
			/**
			 * 初期化
			 */
			protected function onInit():void {
				StyleManager.getStyleManager(null).loadStyleDeclarations("css/blue.swf");
			}
		]]>
	</fx:Script>
	<fx:Declarations>
	</fx:Declarations>

	<mx:VBox width="100%">
		<mx:FormItem width="100%" label="数値入力">
			<s:HGroup width="100%" gap="0">
				<local:NumericTextInput id="numericTest" precision="2" width="100" textAlign="right" />
				<mx:Text text="数値のみ入力できます。フォーカスを移動すると、[###,0.##]で表示されます。"/>
			</s:HGroup>
		</mx:FormItem>
		<mx:FormItem width="100%" label="文字列入力">
			<s:HGroup width="100%" gap="0">
				<mx:TextInput id="stringText" width="100" imeMode="JAPANESE_HIRAGANA" />
				<mx:Text text="通常の TextInput を利用しています。"/>
			</s:HGroup>
		</mx:FormItem>
	</mx:VBox>

</s:Application>

ダウンロード

サンプルソースは、こちら からダウンロードできます。

おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL