移动端弹出输入法将input键盘弹出页面顶上去去，收起来时不回位

来源：蜘蛛抓取(WebSpider) 时间：2019-01-11 07:27 标签： input键盘弹出页面顶上去

填写表单时会调出手机上面的软鍵盘若body是按照百分比做自适应布局会挤压布局（iphone人家就好好着呢）。
1、将表单内容按照px定宽高
2、整个表单form绝对定位（尽量保证各表单位置不变）
3、form里面的元素相对定位，上下的间隔使用margin-top
4、以上保证表单不会挤压变形若body上有自适应的背景图片，防止背景图片压缩可以這样：
    但是百度了一下，暂没找到检测软键盘出来的方法那就假设表单被点击时软键盘就出来了（一般手机都默认这样）

 　　　　 //获取設备高度（软键盘调出来时高度也会变小，所以在点击事件前获取）
　　　　　　　　//失去焦点后还原
 }); 
 后来发现这一条不仅是多余的，還会造成多个input时出现问题其实说白了就是有表单的时候不要用css去铺满背景，而是用js动态监测屏幕高度（px）然后去铺满

还有一点就是，調出软键盘时手机好像默认会把整个表单顶上去防止被键盘遮住。测试了一下如果表单时相对于body定位（body有定位），就不会顶上去但昰只有当前编辑的部分会显示出来。不过可以滑动

以前总觉得表单编辑时太丑终于不用将就了，哈哈哈哈哈哈哈哈哈~~~~~~~~~

我要回帖

更多关于 input键盘弹出页面顶上去 的文章

 

随机推荐