Question

how can I dynamically change some word color in spark component TextArea. For example, I want in text “A quick brown fox jumps over the lazy dog.” word “dog” to be red color and word “fox” green.

<s:TextArea textFlow="{scriptTextAreaTextFlow}" change="{doSomething(event)}" text ="A quick brown fox jumps over the lazy dog." id="tarea1"/>

On every change function doSomething is called, she finds every positions of word “dog” and every positions of word “fox”. All I need to do is to dynamically change color of those words. In mx it was easy with TextRange.

tr = new TextRange(tarea1, false, start, end);
tr.color = "#00FF00"

Now, in spark I found a way to color it with TextFlow

scriptTextAreaTextFlow = TextFlowUtil.importFromString(resoult);

where “resoult” is HTML code generated based on text from TextArea, so words dog and fox are colored. The problem is that checking (and coloring) is done live (onChange) and after every

scriptTextAreaTextFlow = TextFlowUtil.importFromString(resoult);

TextArea anchor is moved to position 0(start). Only way i found to solve this is to remember anchor position before edit and set it after coloring but I’m searching for better solution.

Please help…

Thanks

Answer 1

Another approach would be to trap the onChange and use a regular expression to change the HTMLText around your keywords to include the ‘font color=’ designations.