CODEWITHSUNDEEP
htmlcssjquery-mobilevirtual-keyboard
Maria Piaredryj
Maria Piaredryj

Reputation: 1662

Is there any way to prevent virtual smartphone keyboard hiding input?

On my mobile site (I use jQuery Mobile) I have inputs at the bottom of the page. When I try to input some info to it virtual keyboard appears (as it must do). And problem is that it hides a half of the page including input where I'm typing instead of the page scrolling up. In the example inputs 4-8 are hidden under the keyboard.

HTML

<input type="text" placeholder="1">
<input type="text" placeholder="2">
<input type="text" placeholder="3">
<input type="text" placeholder="4">
<input type="text" placeholder="5">
<input type="text" placeholder="6">
<input type="text" placeholder="7">
<input type="text" placeholder="8">

CSS

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

Upvotes: 3

Views: 1075

Answers (1)

ED-209
ED-209

Reputation: 4746

I've used jQuery.mobile.silentScroll() for this, on the input focus event, and then scroll back down on blur.

Something like this:

          $('#myinput').on('focus',function(){
                $.mobile.silentScroll($('#myinput').position().top - 100);
                $('#myinput').focus();
            });
            $('#myinput').on('blur',function(){
                $.mobile.silentScroll($('#myform').position().top);
            });

Upvotes: 1

Related Questions