[Flex] TextInputの入力文字制限 (restrict指定)

2012年3月26日 propg Flex, 未分類, 0

FlexのTextInputなどで入力文字の制限をするときのサンプルです。

restrictプロパティに入力可能文字を指定します。
1文字ずつの指定でも良いのですが、正規表現的な指定もできるので、以下の例のような書き方が一般的です。

この例では、入力文字をかなり絞っていますが、
実際にはカンマやコロンなどの記号や数字も入力できるようにする場合が多いと思います。
その場合は、後ろに入力可能文字を付け足していけばOKです。

mxml上で直接指定する場合はXMLの制限を受けますので、
XMLのタグに使われる”>”などはエスケープする必要があります。

[embedSWF]http://propg.ee-mall.info/wp-content/uploads/RestrictTest.swf,500, 300[/embedSWF]

	<s:Form>
		<s:FormItem label="ひらがなのみ入力可能">
			<s:TextInput restrict="ぁ-んー" width="300"/>
			<s:Label width="300" text="ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんー"/>
		</s:FormItem>
		<s:FormItem label="全角のカナのみ入力可能">
			<s:TextInput restrict="ァ-ヶー" width="300"/>
			<s:Label width="300" text="ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶー"/>
		</s:FormItem>
		<s:FormItem label="半角カナのみ入力可能">
			<s:TextInput restrict="\uff66-\uff9f\(\)\;lt\;gt" width="300"/>
			<s:Label width="300" text="ｦｧｨｩｪｫｬｭｮｯｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ"/>
		</s:FormItem>
		<s:FormItem label="数字のみ入力可能">
			<s:TextInput restrict="0-9" width="300"/>
			<s:Label width="300" text="0123456789"/>
		</s:FormItem>
	</s:Form>

ちなみに、restrictに指定した文字範囲の文字を羅列するには、以下のようなコードを書いてみると確認することができます。

// “ァ-ヶ”に含まれるすべての文字を列挙する
var s:uint = ‘ァ’.charCodeAt(0);
var e:uint = ‘ヶ’.charCodeAt(0);

var text:String = “”;
for (var i:uint = s; i <= e; i++) { text += String.fromCharCode(i); } trace(text); [/as3]

 

== ランキングに参加しています。ぜひクリックお願いします ==

Flex, restrict

セマンティクスとは何？ [Java] 半角カナのみかをチェックする