Skip to main content
K
kevsfa
Participating Frequently
June 11, 2012
Question

iOS input fields move when typing?

  • June 11, 2012
  • 2 replies
  • 5937 views

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.

This topic has been closed for replies.

2 replies

P
phonefusionryan
Inspiring
June 13, 2012

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

K
kevsfaAuthor
Participating Frequently
June 14, 2012

_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.

K
kevsfaAuthor
Participating Frequently
June 14, 2012

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);

K
kevsfaAuthor
Participating Frequently
June 12, 2012

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.

http://k-m-p.com/images/giftextinput.gif

A
Anonymous
June 13, 2012

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

K
kevsfaAuthor
Participating Frequently
June 13, 2012

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!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices