Keyboard covers my textField when placed on botton of the screen.

[formatc]

Well, the question is quite simple, if you read the title… I have a textField input at the bottom of my screen, and when I click on it to input some text, the keyboard covers the text field and the user can’t see what he/she is writing.

See as example of what I’m trying to do, Ruzzle (I hate that game…), when you “chat” with someone in that game, the input field is at the bottom of the screen, when the user click on it, the keyboard “pushes” the application up the screen so the keyboard is under the input field, and does not cover it.

Is it possible to make corona SDK act the same why if the keyboard “sees” it is covering the textField it supposed to be filling?

[bjsorrentino]

Hi @formatc,

I think some developers solve this by moving/transitioning the text field up when the keyboard moves in. You’ll probably have to experiment with the correct timing and positioning, and try it out on different platforms to ensure the behavior is what you expect.

Hope this helps,

Brent

[mpappas]

Brent is dead-on for how I’m dealing with it.

My entire screen (for text entry) is in one group, and when a field on the lower portion of the screen (where the kb pops up) is tapped, I use something like transition.to(myGroup, {y = y - 100, time=500, onComplete=editField2}).

Once the screen slide up completes, the transition calls my real editiing set up function (creates native field, places it, takes the input until completed). Once the editing is done, it fires off the opposite transition to move everything back down.

How far to move is dependent on a lot of things, including your virtual screen coord setup. But even so, there’s no ideal distance to move everything up that I know of, most devs have estimated how far (but estimated to cover most android cases, which seem pretty variable - some have really tall onscreen kbs).

[formatc]

Well, since my app/game is made for Galaxy S3 (and hopefully 4, will we see some kind of update to the simulator with the possibility to simulate new devices??) and iPhone 4/4s and 5, I can manage to figure out how much to slide the textfield up the screen, I thought I would have to do it that way, but I thought there might be a way I’m not aware of to “push” up the application and allow the keyboard to be under it, and not over it.

Thanks.

Yuval Lahav.

[mpappas]

Yes there is a way to “push up the application”… If you put all of your display objects in 1 single group, and use the transition.to() as above to move it, your entire application will seem to “push up”. Everything slides all together if you do that one line of code (to a main display group that holds everything).

It’s not by the OS though, but the user won’t know who is causing it (it looks just the same).

[JonPM]

@mpappas

Yes there is a way to “push up the application”… If you put all of your display objects in 1 single group, and use the transition.to() as above to move it, your entire application will seem to “push up”. Everything slides all together if you do that one line of code (to a main display group that holds everything).

It’s not by the OS though, but the user won’t know who is causing it (it looks just the same).

I thought you couldn’t add textfields to display groups?

[mpappas]

You can add display.newText(), which is what most devs do with corona.

Those push around inside groups just fine. Once the entire group (screen) is pushed up, then you create a native field for the actual editing. If you create it the same height, width etc as the display.newText field, the user will not notice the difference.

Once the editing is complete, copy the data to the display.newText field, and then destroy the native filed.

Then slide it back down.

I believe most corona devs implement their text editing this way, because of exactly the problem you pointed out – native fields don’t play well with regular objects.

[bjsorrentino]

Hi @formatc,

I think some developers solve this by moving/transitioning the text field up when the keyboard moves in. You’ll probably have to experiment with the correct timing and positioning, and try it out on different platforms to ensure the behavior is what you expect.

Hope this helps,

Brent

[mpappas]

Brent is dead-on for how I’m dealing with it.

My entire screen (for text entry) is in one group, and when a field on the lower portion of the screen (where the kb pops up) is tapped, I use something like transition.to(myGroup, {y = y - 100, time=500, onComplete=editField2}).

Once the screen slide up completes, the transition calls my real editiing set up function (creates native field, places it, takes the input until completed). Once the editing is done, it fires off the opposite transition to move everything back down.

How far to move is dependent on a lot of things, including your virtual screen coord setup. But even so, there’s no ideal distance to move everything up that I know of, most devs have estimated how far (but estimated to cover most android cases, which seem pretty variable - some have really tall onscreen kbs).

[formatc]

Well, since my app/game is made for Galaxy S3 (and hopefully 4, will we see some kind of update to the simulator with the possibility to simulate new devices??) and iPhone 4/4s and 5, I can manage to figure out how much to slide the textfield up the screen, I thought I would have to do it that way, but I thought there might be a way I’m not aware of to “push” up the application and allow the keyboard to be under it, and not over it.

Thanks.

Yuval Lahav.

[mpappas]

Yes there is a way to “push up the application”… If you put all of your display objects in 1 single group, and use the transition.to() as above to move it, your entire application will seem to “push up”. Everything slides all together if you do that one line of code (to a main display group that holds everything).

It’s not by the OS though, but the user won’t know who is causing it (it looks just the same).

[JonPM]

@mpappas

Yes there is a way to “push up the application”… If you put all of your display objects in 1 single group, and use the transition.to() as above to move it, your entire application will seem to “push up”. Everything slides all together if you do that one line of code (to a main display group that holds everything).

It’s not by the OS though, but the user won’t know who is causing it (it looks just the same).

I thought you couldn’t add textfields to display groups?

[mpappas]

You can add display.newText(), which is what most devs do with corona.

Those push around inside groups just fine. Once the entire group (screen) is pushed up, then you create a native field for the actual editing. If you create it the same height, width etc as the display.newText field, the user will not notice the difference.

Once the editing is complete, copy the data to the display.newText field, and then destroy the native filed.

Then slide it back down.

I believe most corona devs implement their text editing this way, because of exactly the problem you pointed out – native fields don’t play well with regular objects.

[FAVIO007]

Hi mpappas, can you please post some part of your code in order to understand what is the “trick” to do that. I am raising an application which uses textfield and at the bottom of the form once I’ve need to write a word on the textfield, the keyboard covers all the field.

Thanks!

[mpappas]

transition.to()

If you’ve planned ahead, and have all your screen objects in a group, you can transition.to() the y coord of the group (screen) to slide the whole screen up at once. When the keyboard is dismissed, transition it back down.

Just wish there were a way to tell the height of the kb on the current device

[FAVIO007]

Thanks for your reply, mpappas. Don´t you have a sample to share with us?

Thanks in advance

[mpappas]

Hi FAVIO007,

In my case, I have my fields “tap” listener do the sliding / transition for the screen, and when it completes, it fires off a second function to call for editing the text… as so

[lua]

local function WebLinkEditListener2(event) – This is the second half – AFTER screen moves / transitions so keyboard can pop up…

    this.WebLinkText.isVisible = false    – Hide the onscreen text while editor is up…
    audio.play( mojoData._TapAudio, { channel=mojoData._sfxChannel, loops=0, fadein=0 }  )  – button tap sfx
    
    yOffset = 0 – editField code will note fields new / transition position, so yOffset 0 is ok (since field is part of group that moved)
       
    this.messageEditField = editField.new(this.WebLinkText.text, this.WebLinkBack, WebLinkEditDone, “url”, false, yOffset, 100)      – Field the user is editing… (native text field)
    this:insert(this.messageEditField)      – Add it to the display… (it’s native so no matter really)

    return true
end

 local function WebLinkEditListener(event)
    print(" – WebLinkEditListener(event)")
    audio.play( mojoData._InputAudio, { channel=mojoData._sfxChannel, loops=0, fadein=0 }  )  – special input field sfx
    
    transition.to(this, {y = -100, time=150, onComplete = WebLinkEditListener2} )  – fast slide up of screen… (this.y)
 
    return true
 end
 

[/lua]

[ksan]

You can try the newEditField widget. It has the capability to slide screen to cater for keyboard popup and many more features. See it at http://widgetstown.com/ and register for a free download and access to sample app etc. Documentation can also be found on the same URL. Hope this helps.

[FAVIO007]

Hi mpappas, can you please post some part of your code in order to understand what is the “trick” to do that. I am raising an application which uses textfield and at the bottom of the form once I’ve need to write a word on the textfield, the keyboard covers all the field.

Thanks!

[mpappas]

transition.to()

If you’ve planned ahead, and have all your screen objects in a group, you can transition.to() the y coord of the group (screen) to slide the whole screen up at once. When the keyboard is dismissed, transition it back down.

Just wish there were a way to tell the height of the kb on the current device