LiveCode LessonsHow To - LiveCode Mobile Tasks LiveCode Mobile TasksMove a native mobile text input control so it is not covered by keyboard

Move a native mobile text input control so it is not covered by keyboard

If you have a native mobile input control on your application that gets coverd by the soft-keyboard of your device/simulator, then you can use the following method to move the control into view when the keyboard is active and then return it  to its original position when the keyboard is deactivated

Create a new stack and implement a native input control

Create a new stack and implement a native input control

In this example I create a native input control with the following card script-

local sinputId

on opencard

  if environment() = "mobile" then

     mobileControlCreate "input"

     put the result into sinputID

     mobileControlSet sinputID, "rect", "38,726,748,916"

     mobileControlSet sinputID, "visible", "true"

     mobileControlSet sinputID, "opaque", "true"

  end if

end opencard

The inital rect of this control is set to the rect of the rectangle graphic I created.

Add code to move input control

Add code to move input control

The above hadlers are mobile specific and are sent whenever a mobile keyboard is activated or deactivated. We can use these handlers to mobile the mobile input control to a desired location above the keyboard and then return it to its original position when the keyboard is deactivated.

on keyboardActivated

  mobileControlSet sinputID, "rect", "36,320,746,510"

  set the rect of graphic "rectangle" to "36,320,746,510"

end keyboardActivated

on keyboardDeactivated

  mobileControlSet sinputID, "rect", "38,726,748,916"

  set the rect of graphic "rectangle" to "38,726,748,916"

end keyboardDeactivated

----------------------------------------------------------------

I place this script after the preOpenCard script to give me-

local sinputId

on opencard

  if environment() = "mobile" then

     mobileControlCreate "input"

     put the result into sinputID

     mobileControlSet sinputID, "rect", "38,726,748,916"

     mobileControlSet sinputID, "visible", "true"

     mobileControlSet sinputID, "opaque", "true"

  end if

end opencard

on keyboardActivated

  mobileControlSet sinputID, "rect", "36,320,746,510"

  set the rect of graphic "rectangle" to "36,320,746,510"

end keyboardActivated

on keyboardDeactivated

  mobileControlSet sinputID, "rect", "38,726,748,916"

  set the rect of graphic "rectangle" to "38,726,748,916"

end keyboardDeactivated

 

 

Launch on Device/ Simulator

Launch on Device/ Simulator

You should now see that when the keyboard is activated on a device/simlator, the input field moves appropriatley.

0 Comments

Add your comment

E-Mail me when someone replies to this comment