Capturing user input from Flex TextInput control: which event to use?

Question

Should I use the change or textInput event to capture user input on a TextInput control? Why?

Solution 1

textInput is dispatched only when the user has input text into the control. change, on the other hand, is dispatched on every change committed by the user. So for example, if the user deletes a part of the text, only the change event is dispatched.

Neither of these is dispatched when the text is modified via code:

flash.events.TextEvent.TEXT_INPUT:

"Dispatched when the user types, deletes, or pastes text into the control."

(ignore the word "delete" there -- I just tried it and this event is not dispatched when text is deleted by the user)

flash.events.Event.CHANGE:

"Dispatched when text in the TextInput control changes through user input. This event does not occur if you use data binding or ActionScript code to change the text."

You can also use the valueCommit event, which is dispatched when the user "commits" the changes (usually by moving the focus away from the text field), but remember that this event is also dispatched when the field value is changed programmatically.

Solution 2

That's a great answer, hasseg. If I had enough rep, I'd up-vote it.

Depending on what you're capturing the user input for, you could subclass the TextInput component and override the internal listeners for the change and textInput events.

I don't know if there are a lot of reasons you'd want to do this, but I did it recently to deal with a bug in OS X that causes pasted linebreaks to be represented as '\r', instead of '\n'.

All you need to do is add the following after your super() call in the constructor of your subclassed object:

this.addEventListener(Event.CHANGE, textFieldChangeListener);   
this.addEventListener(TextEvent.TEXT_INPUT,textFieldInputListener);

And then add the listener methods and the code you want to execute.

Comments

[gkanak]

Thanks a lot for the clarifying answer. As a side note: I did some testing and found that when accessing the text property in the event handler for textInput event (using event.currentTarget.text), the value I get reflects the value of text before the keypress that triggered the event.

[hrabinowitz]

I realized after submitting this that using FOCUS_OUT is not a great approach because, while it is true that it is only triggered once per field, it tells you nothing about whether the user changed the value or not.

[Enrique]

That's not true for me, at least not in Flex 4.5 (I guess Flex 4 too) using spark TextInput. I get the last text value in the change event, there's also a changing event dispatched before.

[hrabinowitz]

So it does seem, as hasseg notes above, that CHANGE is the best overall choice to listen to for user changes to a TextInput field. However, if user types control-C to copy a field value, this will also trigger a CHANGE event.

[Matt Chan]

You can, however, grab the entirety of the text from the TextInput when processing the CHANGE event if you need to use the final result for something.