How to move input fields covered by virtual keyboard

The place to discuss anything and everything about running your LiveCode on Android

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Texter
Posts: 19
Joined: Mon Jun 18, 2018 5:17 pm

How to move input fields covered by virtual keyboard

Post by Texter » Mon Jun 18, 2018 9:27 pm

Hi

I am new with Livecode but I have created an app for me that work fine on a tablet.

The only thing is if I enter an imput field and the vitual keyboard appears the field is covered by the keyboard.

I read different ways for a solution but I did not understand how they work or where to put the code.

Can someone explain it to me or give me an instruction.

Thank you
Texter

jmburnod
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2718
Joined: Sat Dec 22, 2007 5:35 pm
Location: Genève
Contact:

Re: How to move input fields covered by virtual keyboard

Post by jmburnod » Mon Jun 18, 2018 9:51 pm

Hi,
You have to set the rect of your fld when keyboardActivated is sent.
Something like that:

Code: Select all

on keyboardActivated
   put the rect of fld "myFld" into tRect
   put 350 into item 4 of tRect -- 350 of what you want for bottom of fld
   set the rect of  fld "myFld"  to tRect
end keyboardActivated
Best
Jean-Marc
https://alternatic.ch

Texter
Posts: 19
Joined: Mon Jun 18, 2018 5:17 pm

Re: How to move input fields covered by virtual keyboard

Post by Texter » Mon Jun 18, 2018 10:46 pm

Thank you Jean-Marc

I will try it tomorrow

Texter

Texter
Posts: 19
Joined: Mon Jun 18, 2018 5:17 pm

Re: How to move input fields covered by virtual keyboard

Post by Texter » Tue Jun 19, 2018 1:18 pm

Hello Jean-Marc

Tryed your code but I think the better way for me is to set the location and bring it back after input of the field.

But however thank you

Texter

Klaus
Posts: 13793
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: How to move input fields covered by virtual keyboard

Post by Klaus » Tue Jun 19, 2018 6:34 pm

I'm sure Jean-Marc meant this more as an example for when and what can be done in general
and not the actual solution for your problem! 8)

Texter
Posts: 19
Joined: Mon Jun 18, 2018 5:17 pm

Re: How to move input fields covered by virtual keyboard

Post by Texter » Thu Jun 21, 2018 7:10 am

Hi
Thanks to Jean-Marc and Klaus

I use now
put the location of field Field1 into tLocold
put 500,50 into tLoc
set the location of field Field1 to tLoc

and set it back to tLocold if the keyboard disappear

Is there a way to use the field ID as a variable instead of the name?

Like
put the location of field gFieldnumber into tLocold
put 500,50 into tLoc
set the location of field gFieldnumber to tLoc

Texter

mrcoollion
Posts: 709
Joined: Thu Sep 11, 2014 1:49 pm
Location: The Netherlands

Re: How to move input fields covered by virtual keyboard

Post by mrcoollion » Thu Jun 21, 2018 9:26 am

This works

Code: Select all

   put the ID of fld "TheField" into tFieldID
   answer fld  ID tFieldID
So I guess the following should work (tested it and it works)

Code: Select all

put the location of field ID gFieldnumber into tLocold
put 500,50 into tLoc
set the location of field ID gFieldnumber to tLoc
Or try this.
Put a field in your card with the name "TheField" and put some text into it and place a button above this field with the following code.

Code: Select all

on mouseUp
   put the ID of fld "TheField" into tFieldID
   put the location of field ID tFieldID into tLocold
   answer "The Text in field = " & FLD ID tFieldID
   answer "Original location of the field  = " &tLocold
   put tLocold into tLoc
   add 50 to item 1 of tLoc // Horizontal move
   add 60 to item 2 of tLoc // // Vertical move
   set the location of field ID tFieldID to tLoc
   answer "New location of the field  = " & tLoc
   set the location of field ID tFieldID to tLocold
   answer "Back to old location :-)"
end mouseUp

jmburnod
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2718
Joined: Sat Dec 22, 2007 5:35 pm
Location: Genève
Contact:

Re: How to move input fields covered by virtual keyboard

Post by jmburnod » Thu Jun 21, 2018 5:45 pm

Hi texter,
Some comments about your scripts
1. Using field "Field1" instead field Field1 (without quotes LC search a variable named Field1)
2. You may use id like this
put the short id of fld "Field1" into tFldID
put the short name of fld id tFldID into fld id tFldID -- tFldID = the id of fld "Field1"
3. Rect should be better than loc to be sure that the top of your fld > 0 (Same comment for mrcoollion)
4. In this case i would use a customproperty like uMyrectWithoutKB of fld "Field1" instead tLocold (tLocold is a local variable ?)
Good luck for next step :D
Jean-Marc
https://alternatic.ch

Texter
Posts: 19
Joined: Mon Jun 18, 2018 5:17 pm

Re: How to move input fields covered by virtual keyboard

Post by Texter » Fri Jun 22, 2018 12:50 pm

Hi

Thanks Jean-Marc and mrcoollion The movement works now as I want.

But now I have the next trouble and do not know how to start.

On my card are six fields. If I want to fill in something in the upper 3 it is no problem.

The lower 3 fields I move to a location where the kexboard do not cover them. No problem now.

But the moved field lays under one of the upper fields and Labels.
Layerproblem.JPG

Is this a problem with the layers?
How can I put them to the top? Or even better if I could underlay the field with a rectangle.

Texter

Klaus
Posts: 13793
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: How to move input fields covered by virtual keyboard

Post by Klaus » Fri Jun 22, 2018 1:01 pm

Hi Texter,

add this line before you actually MOVE your field u for text entry:

Code: Select all

...
### Will put the field on top of all other controls on the card!
set the LAYER of fld ID tFieldID to TOP
set the location of field ID tFieldID to tLoc
...
Best

Klaus

Texter
Posts: 19
Joined: Mon Jun 18, 2018 5:17 pm

Re: How to move input fields covered by virtual keyboard

Post by Texter » Tue Jun 26, 2018 7:10 pm

Hi

I done it, thanks.

I move the field and the layer is on top but how can I exit the field when I entered some text?

Because if I do not exit the field the soft keyboard is still active and cover the next field where I want to fill in some text.

Texter

mrcoollion
Posts: 709
Joined: Thu Sep 11, 2014 1:49 pm
Location: The Netherlands

Re: How to move input fields covered by virtual keyboard

Post by mrcoollion » Wed Jun 27, 2018 7:24 am

Maybe this is an idea?

Make an additional button that only shows when the field is in enter data mode on the right side of the field with Ok label or an icon.
The action of this button is to move everything back to it's original position and layer, put the focus on something else and anything else you want to do (e.g. save data ...) and then hide it's self..

Regards,

Paul

Klaus
Posts: 13793
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: How to move input fields covered by virtual keyboard

Post by Klaus » Wed Jun 27, 2018 8:28 am

Yep, what Paul said!

Use something like this for your "OK" button:

Code: Select all

on mouseup
   focus on nothing
end mouseup
Will surely make the keyboard disappear!

Texter
Posts: 19
Joined: Mon Jun 18, 2018 5:17 pm

Re: How to move input fields covered by virtual keyboard

Post by Texter » Wed Jun 27, 2018 9:08 am

Hi

Thanks Paul, Klaus

Work fine now

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7210
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: How to move input fields covered by virtual keyboard

Post by jacque » Wed Jun 27, 2018 4:17 pm

On mobile the usual way is to tap outside the field which will dismiss the keyboard. When the keyboard goes away, LC will send a keyboardDeactivated message. Trap that and have the handler move the field back down.

You will also get a keyboardActivated message when the field is tapped and the keyboard appears which you can use to move the field up.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply

Return to “Android Deployment”