Input TextFields – auto select all text

Sometimes you want to have all the text in an input field selected when the user clicks on the field – this makes it easier to enter data quickly on certain forms, particularly if the fields are pre-filled.
But it’s not so easy to do without breaking the standard functionality of the input field. This code hopefully does it without breaking anything, and without compromising on the new functionality.

Put this demo script in Frame 1 of a fresh FLA and give it a whirl:
// Create some text TextFields
var n:Number;
var tf:TextField;
var tfmt:TextFormat = new TextFormat("_sans", 20);
for(n = 0; n 2){
tf.text = "Test text for number " + (n+1);
}

tf.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
}

// Listen on the stage for the KEY_FOCUS_CHANGE event so that we can handle
// when the user tabs into a TextField.
addEventListener(FocusEvent.KEY_FOCUS_CHANGE, handleKeyFocusChange);

function handleKeyFocusChange($e:FocusEvent):void {
// If the user tabs to a textfield, cancel the focus in handler so that
// subsequent mouse clicks in that field DON'T highlight the whole field.
if($e.relatedObject is TextField){
var tf:TextField = TextField($e.relatedObject);
tf.removeEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
tf.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
}
}

function handleMouseUp($e:MouseEvent):void {
var tf:TextField = TextField($e.target);
if(tf.selectionBeginIndex == tf.selectionEndIndex){
// If the user hasn't dragged to select text already,
// select the whole text field.
tf.setSelection(0, tf.text.length);
}
tf.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
}
function handleFocusIn($e:Event):void {
var tf:TextField = TextField($e.target);
tf.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
tf.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
}
function handleFocusOut($e:Event):void {
var tf:TextField = TextField($e.target);
tf.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
tf.removeEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
}


Basically it works by listening for the FOCUS_IN event on each TextField – when it gets it, it then listens for the MOUSE_UP event that normally follows. When that event happens it checks if a selection has been made (which happens when the user holds and drags to highlight characters in the field), and if not it highlights the whole field. Now since it’s no longer listening for the FOCUS_IN nor the MOUSE_UP events, it lets the user click again in the same field and it won’t highlight it all again – this is important to make it easier for the user to work with the field.
When the user moves away from the field, the FOCUS_OUT event fires, the TextField catches it and starts listening for the FOCUS_IN event again.

All this is fine unless the user uses the keyboard to TAB into the field – if the user tabs into the field, and then uses the mouse to select characters, we don’t want the whole field to highlight again, so to prevent this we have the stage listen out for the FocusEvent.KEY_FOCUS_CHANGE event. When this event fires we check if the object the focus is moving to (the relatedObject property) is a TextField, if it is then we remove the listener on that field for the MOUSE_UP event – this disables the new highlighting feature. To make sure it works again properly when the user moves out again, we start it listening for the FOCUS_OUT event.

Have I typed enough now? To see it in action:
Auto Highlighting TextField
and
download the FLA (CS4)

Oh and this all works because of the order the events come in as. When you use the mouse to focus on an Input field it goes like this:
FocusEvent.FOCUS_IN
MouseEvent.MOUSE_UP

when you use the keyboard to tab in:
FocusEvent.KEY_FOCUS_CHANGE
FocusEvent.FOCUS_IN
MouseEvent.MOUSE_UP

If this comes in useful at all, please leave a comment?

Advertisement