文本框（input或textarea）获取焦点时，手机自带的键盘会被唤起并且弹出来。 此时，就会导致一个问题：处于absolute（绝对）定位或fixed（固定）定位的元素，会被键盘顶上去，漂浮于键盘上方。这是我们及其不愿意看到的。

该元素如果是按钮

解决办法一

动态监控浏览器窗口的变化。当浏览器窗口的大小发生变化时，如果变化后的窗口高度小于初始的窗口高度，则让按钮隐藏起来；反之，则让按钮正常显示。

var win_h = $(window).height(); // 关键代码
window.addEventListener('resize', function () {
    if($(window).height() < win_h){
        $('.share-btn-box').hide();
    }else{
        $('.share-btn-box').show();
    }
});

解决办法二

// navigator.userAgent.indexOf用来判断浏览器类型
var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
if (isAndroid){ // 如果是安卓手机的浏览器
    var win_h = $(window).height(); // 关键代码
    $("body").height(win_h); // 关键代码
    window.addEventListener('resize', function () {
        // Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          if($('.share-btn-box').is(':visible')){
            $('.share-btn-box').hide();
          }else{
            $('.share-btn-box').show();
          }
        }
    });
}

如果是一个fixed

解决办法一

解决初始化文档高度，让文档高度等于窗体高度，并fixed需要定位的区域在最下方

(function bottonm(){
			if($(document).height()<$(window).height()){
				$('.bottom_fix').css({'position':'fixed','bottom':'0px'});
				$(document).height($(window).height()+'px');
			}
		})();

解决办法二

$('#phone').bind('focus',function(){
			$('.bottom_fix').css('position','static');
			//或者$('#viewport').height($(window).height()+'px');
		}).bind('blur',function(){
			$('.bottom_fix').css({'position':'fixed','bottom':'0'});
			//或者$('#viewport').height('auto');
		});

解决办法三

针对屏幕旋转

$(document).bind('orientationchange',function(){
			if(window.orientation==90 || window.orientation==-90){
				$('.bottom_fix').css('position','static');
			}else{
				$('.bottom_fix').css({'position':'fixed','bottom':'0'});
			}
		})