HTML5 Virtual keyboard appears to block the input box solution

Source: Internet
Author: User

1, problem description

We use H5 to do mobile apps, or to develop mobile web sites. If the text input box is below the entire page, when we click on the input box to enter text, the system pops up the virtual keyboard will block the input box. (This is the only problem with Android, and the IOS system will automatically move the entire page.) )

2, the solution

We can use the element's scrollintoviewifneeded () method. After this method executes, if the current element is not visible in the viewport, the browser window or container element is scrolled and eventually made visible. If the current element is already visible in the viewport, this method does nothing.

3, sample code

This uses jQuery to bind all input boxes (textinput, textarea) Click events, so that when the input box is clicked, call its scrollintoviewifneeded () method to ensure that the input box is visible. (Some Android phone keyboards appear slow when 400 milliseconds are delayed)


Prevents the keyboard from blocking the current input box
$$ (' input[type= ' text '],textarea '). On (' click ', function () {
var target = this;
settimeout (function () {
Target.scrollintoviewifneeded ();
Console.log (' scrollintoviewifneeded ');
},400);
});

Final effect:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.