Flex 2组件：遮罩(masked)文本框

Flex 2组件：遮罩(masked)文本框

08月 8th, 2006 — Dreamer

英文原文：《Flex 2 Component Masked Text Input》
原文地址：http://weblogs.macromedia.com/pent/archives/2006/08/flex_2_componen.cfm

译者：Dreamer。

Flex 2组件：遮罩(masked)文本框

对网页上那些让你输入电话号码却不告诉你如何输入的表单你是否很憎恨？当你输入999 555-1212 的时候你会得到一个错误，它告诉你你应该像这样输入：9995551212。而有的表单把电话号码分为三个域，但是当你填完一个域的时候却不自动跳转到下一个域，你对此又怎么看呢？

Flex在这方面也有不足。是的，你可以添加一个TextInput来接收电话号码并且把它与PhoneNumberValidator相关联。用户可以输入多种格式的号码：9995551212, (999) 555-1212, and 999 555-1212是被允许的几种方式。这很好，但是每个人输入的号码的格式都可能不同。而且你如何把它存储在你的数据库中？你有可以规格化所有格式电话号码的代码吗？或者你就按照它输入的格式把它存储到数据库中？

一个遮罩（masked）的输入框（在Cobol和PL/I中叫做“pictures”）可以帮助解决这些问题。举个例子，假如用户在输入域中看到了(___) ___-____并且当输入9995551的时候却发现输入自动跳过了括号和分割符变成了(999) 555-1___，这不是很好吗？再如果你可以把数据提取成9995551212或者(999) 555-1212然后把这些数据按照统一格式存储到数据库呢？

 

我通过扩展TextInput控件和捕捉键盘，创建了一个可以完成此功能的新的Flex 2 组件。这个组件叫做MaskedTextInput，下面是关于它如何工作的。

你可以点击这里下载包含了这个控件以及一个示例程序的zip文件。

MaskedInput

创建这个控件并不困难。你需要捕捉一些按键并把它们与一个遮罩模式相比较。在遮罩中，我使用#来表示一个只能是数字的位置;用C表示一个会自动变成大写的字母;c表示自动变成小写的字母，并且用A（或a）表示任意的字符。所以一个电话号码遮罩可以是这个样子：”(###) ###-####”，并且姓名域可以是这种格式：”Ccccccccccc”。如果你愿意的话，你可以扩展这些代码获得你想要的遮罩。

困难的部分是处理退格，空格，Delete，Home，End，以及左右箭头按键。为了简单我没有允许插入字符，只能改写。就是说，如果你已经输入了(999) 555-____而你把插入点重新定位到了第一个5前面并输入了6，这个6并没有插入而是替换了5，所以现在光标现在停在6后面而结果变成了(999) 655-____。

这个新控件有下面的属性：

inputMask：用来使用的遮罩，比如上面提到的电话号码遮罩或者US 社会安全号码的###-##-####遮罩。

blankChar：这是代替遮罩中字符在文本域中显示的字符。换句话说，电话号码输入框使用了默认的下划线blankChar，显示为(___) ___-____。

defaultChar：当text通过使用actualText属性从控件获取值的时候，这个字符用来替代blankChar。比如，如果你想要确保任意的#都会被作为0获取，就把defaultChar设为0。当空格键被按下时同样会使用这个字符。

Text：TextInput的text属性被覆写了，使得从控件中设定和获取text更加简单。举个例子，如果你有一个电话号码遮罩可以使你用text=”9995551212”设定数据，这些字符会被分隔开并与inputMask保持一致，在控件中显示为(999) 555-1212。当你使用text属性来获取文本时，未被加工的数据会被返回，没有遮罩或者blackChar字符。

这个新控件还有以下事件：

inputMaskEnd：当遮罩的最后一个字符被输入的时候分派这个事件。你可以用它来跳转到下一个输入域。如果你有一个由很多MaskInput控件组成的表单，这个事件可以和跳转到下一个输入域的代码联系起来，自动地在输入域之间跳转，这可以让用户快速地填写表单。

updateDisplayList

像多数Flex 2组件一样，一个覆写的关键的函数就是updateDisplayList（）。只要是显示改变就会调用这个函数。比如，你可能会绘制背景或者如果这个组件是一个skin，你可能会绘制边框，都将会调用这个函数。旗标（flags）经常用来标识什么被改变了，所以不是每个东西每次被绘制或者改变都会调用updateDisplayList。对于MaskedInput，updateDisplayList做了三件事情，都是通过旗标（flags）。

如果inputMask属性改变了，一个填充了用户的输入的内在数组就会改变。如果text属性改变了它就会被拷贝到working buffer中。最后，如果因为用户输入了字符woking buffer改变了，显示就会被刷新。

当编写Flex 2组件时紧记，多数工作都是编写或者调用updateDisplayList。其他的功能通常用来为updateDisplayList所做的工作设定条件或者数值。