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

Flex数值输入控件

最新推荐文章于 2024-09-26 21:50:05 发布

最新推荐文章于 2024-09-26 21:50:05 发布 · 225 阅读

文章标签：

#Flex #Adobe #XML

Flex 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种基于Flex的自定义数值输入控件——NumberInput。该控件仅允许输入数字，并能自动进行格式化处理，同时提供方便的value属性以简化数值处理。

在用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>