iOS input fields move when typing?

[kevsfa]

So I'm creaing input fields for an iOS app. I have my text fields set up and everything works fine on the phone except this one bug. When I click the text field to input type, the field seems to move down 2 pixels or so. When I exit out of the field, it moves back up 2 pixels. What's causing this shift in the text field when typing. I'd like to have this seamless but it's pretty obvoius something is happening. It almost seems like the text field is too small for the cursor but i don't know how to make the text field larger ABOVE the text so it doesn't shift.

[kevsfa]

So I'm the only one with this problem and text fields? To clarify...when I press a text input field, the text moves a couple of pixels and it looks like the aliasing changes slightly while in typing mode. When I exit out of the field, it returns back to the text I have on the stage. It seems the iOS text input is tweaking my text fields but not sure why.  \

So everyone's text input fields are SEEMLESS without any jumping, flickering, etc...???

Here's a gif. The first image is when the page loads. The second is when the iOS cursor is up. It's a little more fuzzy than normal since I upscaled it a bit.

[Guest]

Hi,

Can you try replacing the flash textfields with the StageText textfields? StageText allows you access to many mobile specific functionalities like autotype, selecting the type of keyboard to show.

http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/text/StageText.html

On iOS for editable text the recommended component to be used is StageText.

-Kshitiz

[kevsfa]

I haven't tried that no. That will be the next thing I try if I can't fix what I have.

I have found that if I leave my text input field to multiline it works for the most part. Now the biggest issue is the return key goes to a new line. If I could stop the return key from going to the next line then I think that would do it.

Thanks!

[Guest]

I would recommend not getting into such hacks. One thing that you can try is to change the font of your textfield to _sans and then check. I would still recommend you to try out StageText once.

[kevsfa]

I'll try _sans and then move to StageText. I know this is doable...I saw someone else's flash app and their input fields work seemlessly.

Thanks for the help!

[luke_luke_luke]

Kshitiz,
When I use the standard text input (dragged onto the stage with flash pro) When running the app on the phone I can see options such as auto complete and spell check like you mentioned. Does this mean that it is automatically a StageText ?

[Guest]

@luke

Yes, those classes have been changed been in Flash Builder as well.

[kevsfa]

So I created a StageText on the screen and it sits on the stage. How do I access it from another function? I'm getting all kinds of errors. I can access MovieClips and text fields just fine. StageText is owning me. There's not many resources on StageText.

[Guest]

Could you write some psuedocode of what you are trying to achieve?

A good introduction to stagetext http://blogs.adobe.com/cantrell/archives/2011/09/native-text-input-with-stagetext.html

[kevsfa]

Look at post 10 above. That's in one function. How do you access MyTextField from another function? I've tried paths to the stage, getchild etc...

....

function A() {

     create StageText called 'MyTextField';

     attach to stage;

}

function B() {

     access 'MyTextField' to set invisible;

     // get errors every way I try to access StageText

}

[phonefusionryan]

you should just declare the stagetext instance outside of your functions.

var myTextField:StageText = new StageText();

myTextField.color = 0xFFFFFF;

myTextField.fontSize = 32;

myTextField.fontFamily = "Helvetica";

myTextField.stage = stage;

myTextField.viewPort = new Rectangle(20, 200, 300, 40);

function A():void{

     myTextField.doSomething

}

[kevsfa]

Phonefusionryan - ok, I'll just do that.

luke_luke_luke - Dogs was a random word I typed in

[luke_luke_luke]

is it to do with scope ?

when its getting created in function A is it getting stored into a variable outside of the function A ?
EDIT: you beat me

lol I just realised the sample text says "Dogs"

[luke_luke_luke]

Kevsfa,
I am experiencing exactly the same thing.
Before Kshitiz mentioned about the StageText I had a few thoughts:
First it was really bad so I tried using iPhone device fonts and setting the font to at least 14.
Now it looks the same as yours. (goes slightly blurry and appears to move).
Next I was going to try and not embed the font.
...then I was thinking maybe its because our apps are not retina ?
When editing the text could it be that its rendering natively (retina) then converting to the non retina app ?

Let me know how the StageText goes !

EDIT: In a new project with a textinput set as font Verdana(non embedded) size 24 it doesn't move but does go blurry after editing(sometimes looks like it moves about 1 pixel) , it must be because of the retina..

[phonefusionryan]

Well I can confirm the issue you are having, as it happens to me as well.

The reason for this happening though, is because when you click on that textfield to start typing, iOS overlays its own native textfield ontop of the app (trying to match color, size, font, etc)... and well... it just cant match it perfectly.

I started a thread a while back where I had a text issue as well (trying to add a rotation to an input textfield on iOS is completely IGNORED, but not android)

http://forums.adobe.com/thread/994781

I know this is an impossible answer BUTTT... technically you could go on the crazy mission to only use dynamic textfields. Basically you add a click event listener to the textfield that activates a completely custom keyboard that would slide out of the bottom. They keyboard would consist of simply buttons that also run on the click event.... I know not feasible but hey... its a solution

[kevsfa]

_sans and verdana do the same thing   Is there any resources to read more about how iOS replaces your text field with theirs? This stupid bug renders adobe air useless. I can't release an app that's doing this. Looks cheap and broken. It has to be seamless.

Now to try StageText....but don't see how it'll fix it. Hope i'm wrong.

[kevsfa]

kshi.gupta, StageText fixed it!!!!!!!!! Thanks! So don't use input fields or input components, use StageText. Thanks for all the help.

imports...

import flash.text.StageText;

import flash.text.ReturnKeyLabel;

import flash.events.KeyboardEvent;

import flash.geom.Rectangle;

import flash.ui.Keyboard;

code...

var myTextField:StageText = new StageText();

myTextField.color = 0xFFFFFF;

myTextField.fontSize = 32;

myTextField.fontFamily = "Helvetica";

myTextField.stage = stage;

myTextField.viewPort = new Rectangle(20, 200, 300, 40);