Chrome for Android, keyboard covers HTML input field when input is clicked

Question

Please see the video for a demonstration of the issue:

When the input is clicked, they keyboard and bottom banner hides the input so the user cannot see what they're typing. One option would obviously be to increase the height of the content but i would like it to stay the height it is. I am not sure what the solution is. This is not an issue on iPhone due to how the focusing on inputs works.

.title {
  text-align: center;
}

.bottom-banner {
  bottom: 0;
  border: 1px solid #e8e9ed;
  background: red;
  left: 0;
  padding: 30px;
  position: fixed;
  /* position: -webkit-sticky;
        position: sticky; */
  width: 100%;
}

.slide-down {
  /* display: none; */
}

.content {
  margin-top: 50px;
  overflow: auto;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <title>Document</title>
</head>

<body>
  <div>
    <h1 class="title">Welcome to the App</h1>
    <div class="content">
      <button class="button">Toggle content</button>
      <div class="slide-down">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ipsum eget arcu ullamcorper vehicula. Quisque luctus pulvinar dui ut commodo. Integer ut ex velit. Phasellus vulputate risus et sapien rhoncus, et bibendum nisi pulvinar. Quisque
        faucibus massa ut placerat malesuada. Mauris non faucibus lorem. Suspendisse porttitor rhoncus risus vitae dignissim. Donec ac tincidunt ligula. Vivamus aliquet enim eget augue hendrerit mollis. Pellentesque convallis nisi tempor sagittis tempus.
        Integer lacinia nisl magna
      </div>
      <br /><br /> Input number:
      <input type="number" />
    </div>
    <div class="bottom-banner">
      this is the content inside of the bottom banner
    </div>
  </div>
</body>

</html>

TechySharnav · Accepted Answer · 2021-08-27 09:33:18Z

You can use scrollIntoView to automatically scroll the input into the view.

let inpt = document.querySelector("input");

inpt.onfocus = function(){
  inpt.scrollIntoView({behavior: "smooth"})
}

/* For Demo*/ 

body{
  height: 200vh;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <title>Document</title>
    <style>
      .title {
        text-align: center;
      }
      .bottom-banner {
        bottom: 0;
        border: 1px solid #e8e9ed;
        background: red;
        left: 0;
        padding: 30px;

        position: fixed;
        /* position: -webkit-sticky;
        position: sticky; */
        width: 100%;
      }
      .slide-down {
        /* display: none; */
      }
      .content {
        margin-top: 50px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div>
      <h1 class="title">Welcome to the App</h1>
      <div class="content">
        <button class="button">Toggle content</button>
        <div class="slide-down">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit
          amet ipsum eget arcu ullamcorper vehicula. Quisque luctus pulvinar dui
          ut commodo. Integer ut ex velit. Phasellus vulputate risus et sapien
          rhoncus, et bibendum nisi pulvinar. Quisque faucibus massa ut placerat
          malesuada. Mauris non faucibus lorem. Suspendisse porttitor rhoncus
          risus vitae dignissim. Donec ac tincidunt ligula. Vivamus aliquet enim
          eget augue hendrerit mollis. Pellentesque convallis nisi tempor
          sagittis tempus. Integer lacinia nisl magna
        </div>
        <br /><br />

        Input number:
        <input type="number" />
      </div>
      <div class="bottom-banner">
        this is the content inside of the bottom banner
      </div>
    </div>
  </body>
</html>

Lajos Arpad · Accepted Answer · 2021-08-27 09:49:54Z

0

You can use Javascript to scroll to the input when it is focused

I add an id to the input:

 <input id="keyboardInput" type="number" />

Then, I change the body padding

<script>
$('#keyboardInput').on('focus', () => {   
    $('body').css('padding-bottom', 300);
    $('html, body').animate({ scrollTop: $('#keyboardInput').offset().top}, 200);
})
</script>

Fiddle: http://jsfiddle.net/hcs4pwvg/47/

edited Aug 27, 2021 at 9:49

Lajos Arpad

80.5k42 gold badges123 silver badges235 bronze badges

answered Aug 27, 2021 at 9:14

Alejandro

113 bronze badges

Collectives™ on Stack Overflow

Chrome for Android, keyboard covers HTML input field when input is clicked

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related