html - Why does page move up when keyboard appears on mobile device?

Question

Is there a way to stop a page scrolling when the keyboard is bought up? Currently if I click on a search box, it is bringing up the keyboard and moving the page up which hides the header on mobile device.

    return (
     <container>
      <main>
      <div className="searchForm">
      <header>Products</header>
        <form>
          <input
            placeholder="Search for product"
            value={this.state.product}
            onChange={this.handleInputChange}
          />

          <footer>
          <p><a href="google.com"</a></p>
          </footer>
        </form>
      </div>
      </main>
     </container>
    );
  }
}

I have looked at other threads and tried but no luck. Similar example: CSS - Chrome Mobile - Page move up when keyboard appears

Answer 1

等待大神解答