AS3 Pitfalls – TextField.setSelection not working
PROBLEM:
TextField.setSelection doesn’t select any text!
SOLUTION:
Set the stage.focus property to your TextField object.
1 2 3 4 | // Selects all the text in myTextField: myTextField.selectable = true; myTextField.stage.focus = myTextField; myTextField.setSelection(0, myTextField.text.length); |
Other search terms:
setSelection not working
setSelection not responding
setSelection broken
setSelection bug
setSelection buggy
DOUBLE_CLICK problem
Ryan Henson Creighton is a Toronto-based game developer, and founder of Untold Entertainment Inc., specializing in online games for kids, teens, tweens and preschoolers.
Popularity: 48% [?]
Rate this Post:
(1 votes, average: 5.00 out of 5)
Loading ...
(1 votes, average: 5.00 out of 5) Loading ...
Email This Post
Our Feeds
Hi,
I used the above example and got some odd results. The focus was set to the correct input field, but only some characters would be recognized. When you click on the input field, all the characters are available.
As I said, odd. Any thoughts on why?
WiL
Wow. That’s a new one on me. i’ve never seen that happen. But if you find out what’s going on, please check back in and tell us about it.
Actually, same thing just happened to me. The textfield is nested through a bunch of movieclips. Tabbing to the next input doesn’t work either.
No clue whatsoever. i haven’t seen this happen yet. Do you have steps to reproduce it faithfully? If so, please post them.
I just noticed this issue, too: the TextField appears to have focus, but when you type, you get a seemingly random array of characters…Here’s the whole class (which has a lot of extra junk, but hey):
package
{
import mdm.*;
import flash.errors.*;
import flash.events.*;
import flash.display.Stage;
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.display.GradientType;
import flash.display.BlendMode;
import flash.filters.DropShadowFilter;
import flash.filters.GlowFilter;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.text.TextFieldType;
import flash.text.AntiAliasType;
import flash.text.Font;
public class OtherAddress extends Sprite
{
public static const OA_WIDTH:uint=400;
public static const OA_HEIGHT:uint=256;
public static const OA_FIELD_WIDTH:uint=304;
public static const OA_FIELD_HEIGHT:uint=24;
internal var oaStage:Stage;
internal var oa:OtherAddress;
public var returnedAddress:Array;
private var base:Sprite;
private var spec:Sprite;
private var oaLabel:TextField;
private var oaStreet:Sprite;
private var oaCity:Sprite;
private var oaState:Sprite;
private var oaZipCode:Sprite;
private var oaStreetSpec:Sprite;
private var oaCitySpec:Sprite;
private var oaStateSpec:Sprite;
private var oaZipCodeSpec:Sprite;
private var oaStreetInput:TextField;
private var oaCityInput:TextField;
private var oaStateInput:TextField;
private var oaZipCodeInput:TextField;
private var oaStreetLabel:TextField;
private var oaCityLabel:TextField;
private var oaStateLabel:TextField;
private var oaZipCodeLabel:TextField;
private var oaOK:SimpleButton;
private var oaCancel:SimpleButton;
private var oaOKLabel:TextField;
private var oaCancelLabel:TextField;
public function OtherAddress ()
{
mdm.Application.init(this, doOtherAddress);
}
private function doOtherAddress ():void
{
drawDisplayObjects ();
}
private function drawDisplayObjects ():void
{
oaStage=this.stage;
oa=this;
base=new Sprite();
base.cacheAsBitmap=true;
base.blendMode=BlendMode.LAYER;
var baseMatrix:Matrix=new Matrix();
baseMatrix.createGradientBox(OA_WIDTH, OA_HEIGHT, (Math.PI/180)*90);
var baseColors:Array=new Array(0xFFFFFF, 0x4E6E6E6);
var baseAlphas:Array=new Array(1, 1);
var baseRatios:Array=new Array(0, 255);
base.graphics.beginGradientFill(GradientType.LINEAR, baseColors, baseAlphas, baseRatios, baseMatrix);
base.graphics.drawRect(0, 0, OA_WIDTH, OA_HEIGHT);
spec=new Sprite();
spec.cacheAsBitmap=true;
spec.blendMode=BlendMode.SCREEN;
var specMatrix:Matrix=new Matrix();
specMatrix.createGradientBox(OA_WIDTH-4, 22, (Math.PI/180)*90);
var specColors:Array=new Array(0xFFFFFF, 0xFFFFFF);
var specAlphas:Array=new Array(0.3, 0.1);
var specRatios:Array=new Array(0, 255);
spec.graphics.beginGradientFill(GradientType.LINEAR, specColors, specAlphas, specRatios, specMatrix);
spec.graphics.drawRect(0, 0, OA_WIDTH-4, 22);
spec.x=spec.y=2;
oaLabel=new TextField();
var oaLabelFormat:TextFormat=new TextFormat();
oaLabelFormat.font=new HNCB().fontName;
oaLabelFormat.size=24;
oaLabelFormat.color=0x4D4D4D;
oaLabel.defaultTextFormat=oaLabelFormat;
oaLabel.embedFonts=true;
oaLabel.selectable=false;
oaLabel.text="Enter an address:";
oaLabel.antiAliasType=AntiAliasType.ADVANCED;
oaLabel.autoSize=TextFieldAutoSize.LEFT;
oaLabel.width=OA_WIDTH-32;
oaLabel.autoSize=TextFieldAutoSize.NONE;
oaLabel.x=16;
oaLabel.y=Math.abs((oaLabel.height*0.5)-8);
// Small labels.
var smallLabelFormat:TextFormat=new TextFormat();
smallLabelFormat.font=new HNC().fontName;
smallLabelFormat.size=16;
smallLabelFormat.align=TextFormatAlign.RIGHT;
smallLabelFormat.color=0x4D4D4D;
oaStreetLabel=new TextField();
oaStreetLabel.defaultTextFormat=smallLabelFormat;
oaStreetLabel.embedFonts=true;
oaStreetLabel.selectable=false;
oaStreetLabel.text="Street";
oaStreetLabel.antiAliasType=AntiAliasType.ADVANCED;
oaStreetLabel.width=48;
oaStreetLabel.height=22;
oaCityLabel=new TextField();
oaCityLabel.defaultTextFormat=smallLabelFormat;
oaCityLabel.embedFonts=true;
oaCityLabel.selectable=false;
oaCityLabel.text="City";
oaCityLabel.antiAliasType=AntiAliasType.ADVANCED;
oaCityLabel.width=48;
oaCityLabel.height=22;
oaStateLabel=new TextField();
oaStateLabel.defaultTextFormat=smallLabelFormat;
oaStateLabel.embedFonts=true;
oaStateLabel.selectable=false;
oaStateLabel.text="State";
oaStateLabel.antiAliasType=AntiAliasType.ADVANCED;
oaStateLabel.width=48;
oaStateLabel.height=22;
oaZipCodeLabel=new TextField();
oaZipCodeLabel.defaultTextFormat=smallLabelFormat;
oaZipCodeLabel.embedFonts=true;
oaZipCodeLabel.selectable=false;
oaZipCodeLabel.text="ZIP";
oaZipCodeLabel.antiAliasType=AntiAliasType.ADVANCED;
oaZipCodeLabel.width=48;
oaZipCodeLabel.height=22;
oaStreetLabel.x=16; oaStreetLabel.y=64-(oaStreetLabel.height*0.5);
oaCityLabel.x=16; oaCityLabel.y=96-(oaCityLabel.height*0.5);
oaStateLabel.x=16; oaStateLabel.y=128-(oaStateLabel.height*0.5);
oaZipCodeLabel.x=16; oaZipCodeLabel.y=160-(oaZipCodeLabel.height*0.5);
// Create text input clips and fields.
var fbMatrix:Matrix=new Matrix;
fbMatrix.createGradientBox(OA_FIELD_WIDTH, OA_FIELD_HEIGHT, (Math.PI/180)*90);
var fbColors:Array=new Array(0xB3B3B3, 0x808080, 0xB3B3B3);
var fbAlphas:Array=new Array(0.5, 0.1, 0.3);
var fbRatios:Array=new Array(0, 191, 255);
var fbSpecMatrix:Matrix=new Matrix();
fbSpecMatrix.createGradientBox(OA_FIELD_WIDTH-4, (OA_FIELD_HEIGHT*0.5)-2, (Math.PI/180)*90);
var fbSpecColors:Array=new Array(0xFFFFFF, 0xFFFFFF);
var fbSpecAlphas:Array=new Array(0.5, 0.1);
var fbSpecRatios:Array=new Array(0, 255);
oaStreet=new Sprite();
oaStreet.cacheAsBitmap=true;
oaStreet.blendMode=BlendMode.LAYER;
oaStreet.graphics.beginGradientFill(GradientType.LINEAR, fbColors, fbAlphas, fbRatios, fbMatrix);
oaStreet.graphics.drawRect(0, 0, OA_FIELD_WIDTH, OA_FIELD_HEIGHT);
oaStreet.x=80;
oaStreet.y=64-(OA_FIELD_HEIGHT*0.5);
oaCity=new Sprite();
oaCity.cacheAsBitmap=true;
oaCity.blendMode=BlendMode.LAYER;
oaCity.graphics.beginGradientFill(GradientType.LINEAR, fbColors, fbAlphas, fbRatios, fbMatrix);
oaCity.graphics.drawRect(0, 0, OA_FIELD_WIDTH, OA_FIELD_HEIGHT);
oaCity.x=80;
oaCity.y=96-(OA_FIELD_HEIGHT*0.5);
oaState=new Sprite();
oaState.cacheAsBitmap=true;
oaState.blendMode=BlendMode.LAYER;
oaState.graphics.beginGradientFill(GradientType.LINEAR, fbColors, fbAlphas, fbRatios, fbMatrix);
oaState.graphics.drawRect(0, 0, OA_FIELD_WIDTH, OA_FIELD_HEIGHT);
oaState.x=80;
oaState.y=128-(OA_FIELD_HEIGHT*0.5);
oaZipCode=new Sprite();
oaZipCode.cacheAsBitmap=true;
oaZipCode.blendMode=BlendMode.LAYER;
oaZipCode.graphics.beginGradientFill(GradientType.LINEAR, fbColors, fbAlphas, fbRatios, fbMatrix);
oaZipCode.graphics.drawRect(0, 0, OA_FIELD_WIDTH, OA_FIELD_HEIGHT);
oaZipCode.x=80;
oaZipCode.y=160-(OA_FIELD_HEIGHT*0.5);
// Field textFields.
var fieldFormat:TextFormat=new TextFormat();
fieldFormat.font=new HNC().fontName;
fieldFormat.size=16;
fieldFormat.align=TextFormatAlign.LEFT;
fieldFormat.color=0x4D4D4D;
oaStreetInput=new TextField();
oaStreetInput.defaultTextFormat=fieldFormat;
oaStreetInput.embedFonts=true;
oaStreetInput.type=TextFieldType.INPUT;
oaStreetInput.text="";
oaStreetInput.antiAliasType=AntiAliasType.ADVANCED;
oaStreetInput.width=OA_FIELD_WIDTH-8;
oaStreetInput.height=OA_FIELD_HEIGHT;
oaStreetInput.x=4; oaStreetInput.y=0;
oaCityInput=new TextField();
oaCityInput.defaultTextFormat=fieldFormat;
oaCityInput.embedFonts=true;
oaCityInput.type=TextFieldType.INPUT;
oaCityInput.text="";
oaCityInput.antiAliasType=AntiAliasType.ADVANCED;
oaCityInput.width=OA_FIELD_WIDTH-8;
oaCityInput.height=OA_FIELD_HEIGHT;
oaCityInput.x=4; oaCityInput.y=0;
oaStateInput=new TextField();
oaStateInput.defaultTextFormat=fieldFormat;
oaStateInput.embedFonts=true;
oaStateInput.type=TextFieldType.INPUT;
oaStateInput.text="";
oaStateInput.antiAliasType=AntiAliasType.ADVANCED;
oaStateInput.width=OA_FIELD_WIDTH-8;
oaStateInput.height=OA_FIELD_HEIGHT;
oaStateInput.x=4; oaStateInput.y=0;
oaZipCodeInput=new TextField();
oaZipCodeInput.defaultTextFormat=fieldFormat;
oaZipCodeInput.embedFonts=true;
oaZipCodeInput.type=TextFieldType.INPUT;
oaZipCodeInput.text="";
oaZipCodeInput.antiAliasType=AntiAliasType.ADVANCED;
oaZipCodeInput.width=OA_FIELD_WIDTH-8;
oaZipCodeInput.height=OA_FIELD_HEIGHT;
oaZipCodeInput.x=4; oaZipCodeInput.y=0;
oaStreet.addChild(oaStreetInput);
oaCity.addChild(oaCityInput);
oaState.addChild(oaStateInput);
oaZipCode.addChild(oaZipCodeInput);
/*
// >>
// Field specs.
oaStreetSpec=new Sprite();
oaStreetSpec.cacheAsBitmap=true;
oaStreetSpec.blendMode=BlendMode.ADD;
oaStreetSpec.mouseEnabled=false;
oaStreetSpec.graphics.beginGradientFill(GradientType.LINEAR, fbSpecColors, fbSpecAlphas, fbSpecRatios, fbSpecMatrix);
oaStreetSpec.graphics.drawRect(0, 0, OA_FIELD_WIDTH-4, (OA_FIELD_HEIGHT*0.5)-2);
oaStreetSpec.x=oaStreetSpec.y=2;
oaStreet.addChild(oaStreetSpec);
*/
// Assemble parts.
oa.addChild(base);
oa.addChild(oaLabel);
oa.addChild(oaStreetLabel);
oa.addChild(oaCityLabel);
oa.addChild(oaStateLabel);
oa.addChild(oaZipCodeLabel);
oa.addChild(oaStreet);
oa.addChild(oaCity);
oa.addChild(oaState);
oa.addChild(oaZipCode);
// oa.addChild(spec);
oaStage.focus=oaStreetInput;
}
}
}
Ah, you know what? I was noticing the problem while testing my movie in Flash. When I disabled the keyboard shortcuts, it worked like it should…Maybe that’s the weird character issue?
Ohhhhhh – NOW i know what you’re talking about. Everyone i talk to has had this problem too – we’ve just experienced it in a different way.
The way i saw it was that i put a simple Key listener together and i couldn’t understand why it didn’t report every keystroke. Then i noticed that while i tested my movie, various things on the IDE toolbar were lighting up.
There it was – Disable Keyboard Shortcuts was the culprit.
i’m going to write a separate post about this issue, because it seems to be tripping up everyone i know!
Thanks for posting your fix, Stickeroo.
didn’t work for me because my input field’s text was empty…
If I set programatically focus on an empty field, I see no caret if the field is empty. (or on a WHITE text field WITH text I get a black caret – instead of white- that didn’t responded to keyboard hits except after hitting right or left arrow)
So my solution to get a AUTO FOCUS and a BLINKING CARETof the WRIGHT TEXT COLOR into textfield:
Here are 3 tricks to get that caret automatically where you think it belongs.
The code written below is not tested for errors, but the concepts are.
var myTF:TextField=new TextField()
myTF.type=’input’;
myTF.text=” “; //at least a space or temp content ‘foo’ text, but NOT empty !
myTF.stage.focus = myTF;
myTF.setSelection(myTF.length,myTF.length);
myTF.text = “”; //empty it again :)
//nice blinky carey in empty field!
/* now for auto focus on a `pre-filled` textfield and a blinking caret on the last position – after last char : */
var myTF:TextField=new TextField()
myTF.type=’input’;
myTF.text=’default text’; //we had this before the focus
myTF.stage.focus = myTF;
myTF.setSelection(myTF.length,myTF.length);
//gives us a caret at the end of the textfield
/* and to get that caret to the beginning of a textfield with `pre-filled` text – before first char */
var tmp:String = myTF.text //we had this “textcontent” in the beginning, before focus
myTF.stage.focus = myTF;
myTF.text=” “; //at least a space or temp content ‘foo’ text, but NOT empty !
myTF.setSelection(first_name.length,first_name.length)
myTF.text = “”; // now empty, we need this step …
myTF.text = tmp; //now the old text again
//caret is upfront now
took me hours to work around this buggy mess…
enjoy it
LATCHO
Doesn’t happen when you test it in a browser, either. Just when you test the movie in flash. Lovely little bug.
i had the same problem…
seems to be a timing issue with the cursor position *just* overriding the setSelection call.
i could fix it with a delay in my focus handler method:
setTimeout(myTextField.setSelection, 50, 0, myTextField.length);
Just wanted to note that if you change the value of the myTextField.selectable it inserts a new text with default formating (in addition to what was there before). Set and keep myTextField.selectable = true when you create the TextField and don’t change it, then you can avoid some problems.
Hey. I Googled up this discussion. I have a similar problem, but kind of the opposite.
What i’m doing is that i’m setting the defaultTextFormat once. Then i’m changing the text in a textField to different texts. It works fine until i click on the textField. After i click and then change the text once more, then defaultTextFormat i reset to the default defautlTextFormat, and not the defaultTextFormat i have set.
I can solve the problem by setting the selectable flag to false, but then the text won’t be selectable ofc.
To me it seems like selecting a text field resets the defaultTextFormat property. Does anyone know more about this?
the setSelection method was not working as expected for me when called as a result of a FocusEvent.FOCUS_IN event on a textfield, but i can confirm that like mathias, delaying the call to setSelection seemed to help/fix the issue
setTimeout(tf.setSelection,50,0,tf.length);
thanks mathias! i guess the actual click on the textfield that prompted the focus event was overriding the setSelection somehow :P
FocusEvent.FOCUS_IN does not allow setSelection() to operate as expected. Changed it to MouseEvent.CLICK and it works correctly.
Thanks!
I had the same problem with keyboard events firing up the UI. I always just re-ran immediately in a flash player – didn’t know you could disable shortcuts!
Thanks for the setSelection tip… :)
In case anyone is still running into the selection problem setSelection works in a similar fashion to String.substr where you have to specify the start point, which if you want to select everything is always 0, and the end position, which you can dynamically grab using TextFieldName.text.length.
Example:
searchField_txt.setSelection(0, searchField_txt.text.length);
Thanks for this solution. It worked for me.