具体问题
安卓手机HTML5页面中input\textarea聚焦时,弹出虚拟键盘导致页面背景向上移动,造成页面混乱或者页面留白。(此现象以本人测试下来看,只有安卓手机存在,iphone手机不会出现此问题)
病因所在
当聚焦input\textarea时,软键盘弹出,改变了height,将高度设置成height:100%,不能达到原来的高度。就会出现留白,或者将页面布局打乱的状况。
解决方案
在input\textarea聚焦时,将body的高度改变为页面可显示的区域的高度。
撸代码(将代码写在input的focus函数中)
- 原生js
var _body=document.getElementsByTagName('body')[0];
_body.style.height=_body.clientHeight+"px";
- jQuery
$('body').height($('body')[0].clientHeight);