安卓手机端HTML5页面input\textarea聚焦时，虚拟键盘弹出导致页面下方留白或者页面混乱的解决方案

具体问题

安卓手机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);