Keyboard hides form fields on mobile device, when user clicked on it or make focus on

Keyboard hides form fields on mobile device, when user clicked on it or make focus on

  

Hi ,

We have input form which has input fields, when i click on them and keyboard get showed on mobile device,  to insert new input , so save button overlaps on top of them . 

Expected result - Form should scroll to top , so user can see the input fields which are hide behind keyboard .

Hi Sagar,

Is this a Web App running in a browser on a mobile device, or a Mobile App? The mobile browser (and a Web App) should put the focussed input above the keyboard. Are you saying this doesn't happen?

Hi Kilian,

We have cordova based mobile app.

Yes , what you said is right , but it input elements are below the keyboard or behind the keyboard.


Hi Sagar,

So you are saying that the focus is on the input, and you can type content in it, it's just not visible?

Hi Sagar,

Does this happen on IOS, Android or both?

Can you post some print screens for us to understand better the exact behavior?

android flow - image 1

android flow - image 2

android flow - image 3

ios  flow - image 1

ios flow - image 2

Normally if the input is not visible, it will become visible just above the keyboard on the first character you type.

Hi guys ,

i have attached 5 images - out of them 3 for android behavior and 2 for ios behavior.

In android , when i click on profession , keyboard gets showed , it get pushed to upward beyond the view port , and it is invisible.

When i started type on this field , i can see the input field again.

but in ios, when i click on profession , it also gets pushed to upward but it is visible in view port. Maybe this is happening because of the device view port height.

@kilian Received your latest reply , if it is normal behavior that it will become visible just above the keyboard on the first character you type. ,  should i ignore it?

and also attaching solution i have done .

I am sorry @daniel had replied me on the normal behavior after i uploaded images.

Sagar,

I would think that as soon as it gets the focus, the input should show, but I've seen other websites and apps having the same problem, so I guess it's "normal" by that definition...

Hi Sagar,

Sorry for the late reply.

I've encountered this issues in the past and it's complicated to have a perfect solution to all devices viewport, but it's possible to improve. 

I can remember 3 approaches for this.

You can try to use Keyboard plugin and listen to the event of Keyboard Open/WillOpen and adjust your content scroll so the input field will always be centered. Knowing wich input is focused, you could scroll the content so that input comes into view.

Alternatively you can work with the input events "focus/blur" and try to adjust the content scroll to center the input.

I'm not sure of the performance impact of this one, but you can listen to a resize event (if you don't want to use the Keyboard plugin). You can listen to when the body.height changes  and have a callback to center the input. something like (el.onresize = function() {myfunction()})

All approaches are tricky because of the devices viewport. Also users can have different/custom keyboards that may interfere with your calculations.

Hope it helps

Henrique Batista wrote:

Hi Sagar,

Sorry for the late reply.

I've encountered this issues in the past and it's complicated to have a perfect solution to all devices viewport, but it's possible to improve. 

I can remember 3 approaches for this.

You can try to use Keyboard plugin and listen to the event of Keyboard Open/WillOpen and adjust your content scroll so the input field will always be centered. Knowing wich input is focused, you could scroll the content so that input comes into view.

Alternatively you can work with the input events "focus/blur" and try to adjust the content scroll to center the input.

I'm not sure of the performance impact of this one, but you can listen to a resize event (if you don't want to use the Keyboard plugin). You can listen to when the body.height changes  and have a callback to center the input. something like (el.onresize = function() {myfunction()})

All approaches are tricky because of the devices viewport. Also users can have different/custom keyboards that may interfere with your calculations.

Hope it helps

Hi Henrique,

Can you please share the OML file for the method you said to move field up will be very helpful.


Thanks,

Pankaj Pant


Hi Pankaj,

I don't have any .oml, I just went through the problem sometimes and I  shared some possible solutions depending on the problem.

If I find the time, I'll build an example and share it.

Cheers