Flex:关于TextArea,如何响应用户输入文本的改变

在TextArea中,如何响应用户输入文本的改变,如当用户输入一个字符时或删除一段文字(按delete)时,怎么响应该变化。

查Flex的Help,有change,datachange,但这些事件中,当调用到该TextArea的text属性时,text的值为改变前的值,而事件event中的text则只是新改变的值,如当插入文字时,则event.text为新插入的文字的值,但当新输入是delete时,即删除一段文字时,则在没有event函数的调用,请问,如何来捕捉用户输入的delete命令,以及如何来响应用户输入后产生的新的串?

根据官网上的这个bug:[url]http://bugs.adobe.com/jira/browse/SDK-15837[/url],Flex 3里TextArea对delete似乎是没什么直接的支持,至少在delete的时候是不会发出textInput事件的。

要捕捉delete可以用TextArea的keyDown事件来监视delete键是否按下。不过似乎还有一种比较hacky的办法:在添加或修改文字的时候,TextArea总是先发出一个textInput事件然后发出一个change事件;而在删除文字(delete或者backspace之类)的时候,却没有textInput事件,直接发出了一个change事件。可以通过这个来判断是否是delete:
[code="js"]private var isDelete : Boolean = true;
public function onChange(evt : Event) : void {
trace(evt.toString() + evt.target.toString());
if (isDelete) {
trace("text deleted");
}
isDelete = true;
}

public function onInput(evt : TextEvent) : void {
trace(evt.toString() + evt.target.toString());
isDelete = false;
}[/code]
分别把onChange和onInput接到某个TextArea的change和textInput事件上然后以debug模式启动程序,就可以看到在删除文字的时候会得到"text deleted"的trace。这个hack的要点是在textInput的handler中将isDelete设为false,然后在onChange中可以检查这个变量的状态,并在离开onChange之前重新将其设为true。

像这样就能够得到被删除的内容(在onChange()中的deleteText):
[code="js"]import mx.controls.textClasses.TextRange;
private var isDelete : Boolean = true;
private var lastText : String = '';
public function onChange(evt : Event) : void {
var ta : TextArea = evt.target as TextArea;
var selection : TextRange = new TextRange(ta, true);
if (isDelete) {
var deletedTextIndex : Number = selection.beginIndex;
var deletedTextLen : Number = lastText.length - ta.text.length;
var deletedText : String = lastText.substring(deletedTextIndex, deletedTextIndex + deletedTextLen);
trace("Text deleted: " + deletedText);
}
isDelete = true;
lastText = ta.text;
}

public function onInput(evt : TextEvent) : void {
isDelete = false;
lastText = (evt.target as TextArea).text;
}[/code]
TextArea当前没有选中任何内容时(或者说选中内容的长度为0时),在其上新建的TextRange的beginIndex和endIndex就会是一样的,都是当前光标所在的偏移量。上面的代码就是利用这个来得到被删除内容的位置。