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.

6 Comments

Mark

Would this apply to a datagrid entry control as well?

Elanor Buchanan

Hi Mark

Yes, you would just change the position of the Data Grid. Something like

on keyboardActivated
set the top of group "DataGrid" to
end keyboardActivated

on keyboardDeactivated
set the top of group "DataGrid" to
end keyboardDeactivated

Kind regards

Elanor

Mark

Thanks Elanor. Maybe I am just being too naive but I tried what you said, moving the top (or bottom) up or down about 170 pixels, and while it did move the control out from under the keyboard it had a pretty negative influence on scrolling -- very jerky with some flashing going on suggesting multiple messages being responded to. I don't have a lot of code affecting this in my script so not sure what the flashing is about. Also, it affected the scroll area -- by that I mean I could not scroll all the way to the top anymore when the keyboard was activated -- the scroll area of the list seemed truncated only going up so far and not all the way. Hope that makes sense. I did not try implementing a native scroller group or anything like that as I understand the dg is supposed to be like a native control? Mark

Mark

Also I did try with accelerated rendering and minimal layout on and off and that didn't seem to make any difference either. Please let me know if there is anything else I can try. Thanks

Mark

My bad. I did find a place (in AddNewRow) where I was re-calling the keyboardActivated handler so that might account for some of the "flashing" behavior and jerkiness. I removed it and its better, still not great, but better.

Elanor Buchanan

Hi Mark

It seems like the scroller is not automatically updated when the DataGrid is moved. Adding a

dispatch "ResetList" to group "DataGrid"

after moving the control seems to help e.g.

on keyboardActivated
set the top of group "DataGrid" to
dispatch "ResetList" to group "DataGrid"
end keyboardActivated

on keyboardDeactivated
set the top of group "DataGrid" to
dispatch "ResetList" to group "DataGrid"
end keyboardDeactivated

I hope that helps, please let me know how you get on.

Kind regards

Elanor

Add your comment

E-Mail me when someone replies to this comment