如何提供内联 TextInput 格式化模板答案

【问题标题】：How to provide an inline TextInput formatting template如何提供内联 TextInput 格式化模板
【发布时间】：2012-08-10 21:32:42
【问题描述】：

我有一个 Spark TextInput 控件，我想在用户输入时自动格式化它。格式类似于XX-XX-XXX-XXX，其中每个X 都是一个数字。

我创建了一个自定义 Formatter，用于在其他位置显示这些值，但我无法找到一个优雅的解决方案来在 TextInput 控件本身中提供这种自动格式设置。

这是我目前拥有的代码。它可以工作，但是当格式化程序插入一个连字符时，TextInput 的插入点不会前进，因此下一个数字会插入到 next-to-last 位置。

<fx:Script>
  protected function changeHandler(event:TextOperationEvent):void
  {
    itemID.text = formatter.format(itemID.text);
  }
</fx:Script>

<fx:Declarations>
  <formatters:MyFormatter id="formatter" separator="-" pattern="{[2,2,3,3]}" />
</fx:Declarations>

<s:Form>
  <s:FormItem label="Item ID:">
    <s:TextInput id="itemID" restrict="0-9" change="changeHandler(event)" prompt="ex. xx-xx-xxx-xxx" /> 
  </s:FormItem>
</s:Form>

这是按顺序输入字符 1,2,3,4,5,6,7,8,9,0 的结果。如您所见，插入点是从末尾开始的三个字符，对应于插入的三个连字符。

关于在这里创建流畅的用户体验有什么建议吗？

【问题讨论】：

我通过创建扩展 TextInput 的自定义组件来做到这一点，但恐怕代码有点笨重，无法粘贴到这里。但最重要的是，我将简单的“文本”属性转换为一个更易于操作的 TextFlow 对象。
我先尝试使用皮肤进行此操作，但无济于事。我认为现在只需更新我的 change 处理程序中的选择就足够了，但很高兴知道我正在做一些工作来全面完成。

标签： actionscript-3 apache-flex formatting flex4.5 textinput

【解决方案1】：

如果您 itemID 是基于 TextField 的类，请使用：

itemID.setSelection(itemID.length, itemID.length);

它将插入符号移动到 TF 的末尾。

【讨论】：

我能够以此为基础来获得解决方案。我不得不使用selectRange 方法而不是setSelection 并手动处理Backspace 键。仍然希望在TextInput 控件上具有labelFunction 属性。