Flex自定义控件——数值输入框

在用Flex开发时，经常遇到TextInput只允许输入数值的情况，如果只是少量的输入框还好处理，在输入框多了之后总觉得麻烦。为了解决这个问题，我在TextInput的基础上扩展，做了个简单的数值输入控件——NumberInput。


1.只允许输入数字
2.当数值发生变化时自动格式化
3.加入了value属性，省去了String转Number的麻烦

 

<!--NumberInput.mxml-->
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml"
 	text="0.0" textAlign="right"
 	restrict="0-9" change="changeHandler()"
 	borderStyle="solid">
	<mx:Script>
		<![CDATA[
			private var _value:Number;
			public function get value():Number{
				return this._value;
			}

			public function set value(_value:Number):void{
				this.text = nf.format(_value);
				this._value = Number(this.text.replace(/,/g, ""));
			}

			protected function changeHandler():void {
				this.text = nf.format(this.text);
				_value = Number(this.text.replace(/,/g, ""));
			}
		]]>
	</mx:Script>
	<mx:NumberFormatter id="nf" precision="2" />
</mx:TextInput>