LiveCode LessonsLiveCode 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 covered 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.

You can download the stack from this lesson here: https://tinyurl.com/yd4gn82l

Create a new stack and implement a native input control

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 initial rect of this control is set to the rect of the rectangle graphic that had been created.

Add code to move input control

The below handlers are mobile specific and are sent whenever a mobile keyboard is activated or deactivated. We can use these handlers to move 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

Placing the above script after the openCard script, you will have:

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/simulator, the input field moves appropriately.

0 Comments

Add your comment

E-Mail me when someone replies to this comment