手机横屏下，输入框输入时被系统键盘遮挡处理方法

最新推荐文章于 2025-05-28 19:34:21 发布

转载最新推荐文章于 2025-05-28 19:34:21 发布 · 3.6k 阅读

文章标签：

#input 输入框被遮挡

HTMl 同时被 3 个专栏收录

16 篇文章

订阅专栏

css

10 篇文章

订阅专栏

Javascript

6 篇文章

订阅专栏

本文介绍了一种针对安卓设备上输入框点击后的优化方法，通过使用jQuery实现点击输入框后延迟滚动到该输入框位置的功能，确保了虚拟键盘弹出时用户体验更佳。

$('input').bind('click',function(e){

    var $this = $(this);

    e.preventDefault();

    setTimeout(function(){

        $(window).scrollTop($this.offset().top - 10);

    },200)

})

    开始输入后：

    开始输入后：

  里面用的setimeout原因是在安卓下，虚拟键盘的弹出有一点延迟，如果一开始就滚动，虚拟键盘还没弹出，url输入条还没收起，减10是为了不用太贴。灵感来自m.baidu.com页面，百度的输入框就是做了这种处理。

原文来自：http://www.w3cmark.com/2015/412.html