How do you hide the keyboard?

[k3_sparklight]

(Confession: I’m using Corona from about a year ago, because I’m working on an old project and it behaves more comprehensibly than the compatibility mode of recent versions.)

I’m having trouble with native.textField. Once the user taps in it (on the device only)  the keyboard pops up, taking up the lower half of the screen. Oops. My text field was in the lower half of the screen! As were its buddies. Most professional apps that I see, if the keyboard takes up the lower half the screen while the keyboard focus is in something in the lower half the screen, everything slides up so that I can still see where I’m typing. But not so here. The lower half of the screen, including the field with the keyboard focus, is hidden. And I cant tap out of it!  Here’s my event handling code:

local function textListener( event )

  peek.text = event.phase

  if event.phase == “ended” or event.phase == “submitted” then

    native.setKeyboardFocus(nil)

  end

end

 but I’m not getting an “ended” if I just tap in the background somewhere, and because it’s a numeric keyboard only, there is no Enter button so I can’t get a “submitted”.

How is this supposed to work? 

[ksan]

Take a look at the Corona Labs sample called “NativeDisplayObjects”. Also the one called “NativeKeyboard”. Good insight in there.

One trick I use with edit fields that are in the lower part of the screen is to use transition.to and move them up so they clear the keyboard and then move them back in “submitted” phase.

Hope this helps.

[marcior]

Hi k3,

what I usually do is create an invisible image on the back and add a touch event to it so that when the user clicks in it, it will call the “native.setKeyboardFocus(nil)” method and make the keyboard disapear…

something like:

local imgBack local function hideKeyboard(event) native.setKeyboardFocus(nil) imgBack:removeSelf() imgBack = nil return true end imgBack = display.newRect(display.contentCenterX,display.contentCenterY, display.contentWidth, display.contentHeight) imgBack.fill = { 1,1,1,0} imgBack:addEventListener("tap", hideKeyboard)

[k3_sparklight]

Thanks, ksan, Those examples were helpful. Sad that they didn’t show an example of a field that might be obscured by the keyboard.

Still not quite understanding how to use transition.to in this case. I’m sure that y is the transition variable, but I’m not sure how far to take it.  Could you share a little bit of sample code that could help? and how does one find out exactly how tall the keyboard is?

[ksan]

Hi K3, 

Your question is very timely and relevant. I am trying to get my head around input fields and data entry etc right this minute. Recently there was a tutorial on inputText fields you might want to look at that one as well. http://www.coronalabs.com/blog/2013/12/03/tutorial-customizing-text-input/

I don’t have a good sample for transition.to involving a field alone but I have a search field sample I was building which does some of this. You can see it at : http://forums.coronalabs.com/topic/41908-lets-work-together-to-build-a-nice-searchbar-sample-app/ . Make sure to get the most recent main.lua. 

What you will find in the sample above is that the input field is created, hidded, then made visible and moved to the top of the screen. This is to mimic the IOS Mail app search behavior so if you look at that one you will get what I’m trying to do . The transition.to code in there should give you all the info you need. 

Keyboard size - Check out the link here for the info on all UI standards for IOS including the keyboards - http://www.idev101.com/code/User_Interface/sizes.html

Hope this helps.

Regards,

Kerem

[RedBeach]

That is how I solved that problem.

When the user clicks inside the textField, I check if the textfield is positionated in the bottom half of the screen. If so, I just move all screen up so the textfield is in the top half of the screen.

[k3_sparklight]

Thanks, Renato. Can you post a little source code, showing how you move all the screen up? That’s the part I’m not clear on yet.  If you can just show me what parameters you use to call transition.to, I think I’ll be good to go.

[marcior]

The simplest way to do it, if you use storyboard, is to do something like:

group.y = group.y + display.contentHeight * 0.5

on the event.phase==“began” (with group being the view of the scene). If the screen moves but the textField does not (which is a possibility given how native.textField works), then you need to add this too:

textField.y = textField.y + display.contentHeight * 0.5

Then, on the event.phase == “ended” or event.phase==“submitted”, you just do :

group.y = group.y - display.contentHeight * 0.5

You should also remember that now on the graphics 2.0, for this to work, you need to set group.anchorChildren=true.

[ksan]

Take a look at the Corona Labs sample called “NativeDisplayObjects”. Also the one called “NativeKeyboard”. Good insight in there.

One trick I use with edit fields that are in the lower part of the screen is to use transition.to and move them up so they clear the keyboard and then move them back in “submitted” phase.

Hope this helps.

[marcior]

Hi k3,

what I usually do is create an invisible image on the back and add a touch event to it so that when the user clicks in it, it will call the “native.setKeyboardFocus(nil)” method and make the keyboard disapear…

something like:

local imgBack local function hideKeyboard(event) native.setKeyboardFocus(nil) imgBack:removeSelf() imgBack = nil return true end imgBack = display.newRect(display.contentCenterX,display.contentCenterY, display.contentWidth, display.contentHeight) imgBack.fill = { 1,1,1,0} imgBack:addEventListener("tap", hideKeyboard)

[k3_sparklight]

Thanks, ksan, Those examples were helpful. Sad that they didn’t show an example of a field that might be obscured by the keyboard.

Still not quite understanding how to use transition.to in this case. I’m sure that y is the transition variable, but I’m not sure how far to take it.  Could you share a little bit of sample code that could help? and how does one find out exactly how tall the keyboard is?

[ksan]

Hi K3, 

Your question is very timely and relevant. I am trying to get my head around input fields and data entry etc right this minute. Recently there was a tutorial on inputText fields you might want to look at that one as well. http://www.coronalabs.com/blog/2013/12/03/tutorial-customizing-text-input/

I don’t have a good sample for transition.to involving a field alone but I have a search field sample I was building which does some of this. You can see it at : http://forums.coronalabs.com/topic/41908-lets-work-together-to-build-a-nice-searchbar-sample-app/ . Make sure to get the most recent main.lua. 

What you will find in the sample above is that the input field is created, hidded, then made visible and moved to the top of the screen. This is to mimic the IOS Mail app search behavior so if you look at that one you will get what I’m trying to do . The transition.to code in there should give you all the info you need. 

Keyboard size - Check out the link here for the info on all UI standards for IOS including the keyboards - http://www.idev101.com/code/User_Interface/sizes.html

Hope this helps.

Regards,

Kerem

[RedBeach]

That is how I solved that problem.

When the user clicks inside the textField, I check if the textfield is positionated in the bottom half of the screen. If so, I just move all screen up so the textfield is in the top half of the screen.

[k3_sparklight]

Thanks, Renato. Can you post a little source code, showing how you move all the screen up? That’s the part I’m not clear on yet.  If you can just show me what parameters you use to call transition.to, I think I’ll be good to go.

[marcior]

The simplest way to do it, if you use storyboard, is to do something like:

group.y = group.y + display.contentHeight * 0.5

on the event.phase==“began” (with group being the view of the scene). If the screen moves but the textField does not (which is a possibility given how native.textField works), then you need to add this too:

textField.y = textField.y + display.contentHeight * 0.5

Then, on the event.phase == “ended” or event.phase==“submitted”, you just do :

group.y = group.y - display.contentHeight * 0.5

You should also remember that now on the graphics 2.0, for this to work, you need to set group.anchorChildren=true.

[k3_sparklight]

Here is my successful solution - for one screen size, so far.  I allow the transition to be seen, quickly.  Unfortunately, native objects can’t be part of groups ,  that’s why I have to loop through the table allFields.

[lua]

local keyboardShift = 200

local shiftTime = 100

function textListener(event)

  peek.text = event.phase

  if event.phase == “began” then

    shiftWorld(-keyboardShift)

  elseif event.phase == “ended” or event.phase == “submitted” then

    native.setKeyboardFocus(nil)

    shiftWorld(keyboardShift)

  end

end

function shiftWorld(distance)

  transition.to(labels, {time=shiftTime, y=(labels.y + distance)})

  for i,field in pairs(allFields) do

    transition.to(field, {time=shiftTime, y=(field.y + distance)})

  end

end

[/lua]

[k3_sparklight]

Here is my successful solution - for one screen size, so far.  I allow the transition to be seen, quickly.  Unfortunately, native objects can’t be part of groups ,  that’s why I have to loop through the table allFields.

[lua]

local keyboardShift = 200

local shiftTime = 100

function textListener(event)

  peek.text = event.phase

  if event.phase == “began” then

    shiftWorld(-keyboardShift)

  elseif event.phase == “ended” or event.phase == “submitted” then

    native.setKeyboardFocus(nil)

    shiftWorld(keyboardShift)

  end

end

function shiftWorld(distance)

  transition.to(labels, {time=shiftTime, y=(labels.y + distance)})

  for i,field in pairs(allFields) do

    transition.to(field, {time=shiftTime, y=(field.y + distance)})

  end

end

[/lua]

[gordon1bob]

Quick Note:

I added my textfields to the sceneGroup and they nicely slid up with the labels. 

It would really be nice if the keyboard would appear in the simulator.

[gordon1bob]

Quick Note:

I added my textfields to the sceneGroup and they nicely slid up with the labels. 

It would really be nice if the keyboard would appear in the simulator.