固定定位布局 键盘挡住输入框内容
1、通过绑定窗口改变事件,监听键盘的弹出。然后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。所以我们位移的距离改成键盘的二分之一就可以了

[JavaScript] 纯文本查看 复制代码

window.onresize = function(){
    //$(".mian")就是固定定位的元素
	if($(".mian").css('top').replace('px','') != 0){
		$(".mian").css('top',0);
	}else{
		var winHeight = $(window).height();
		$(".mian").css('top',-(winHeight/4));
	}
}

2、通过定时器实时监听是否触发input。如果触发input框 就把固定定位，改变成静态定位。这样就会浏览器会总动把内容顶上去

[JavaScript] 纯文本查看 复制代码

function fixedWatch(el) {
    //activeElement 获取焦点元素
	if(document.activeElement.nodeName == 'INPUT') {
		el.css('position', 'static');
	} else {
		el.css('position', 'fixed');
	}
}
 
setInterval(function() {
	fixedWatch($('.mian'));
}, 500);

固定定位布局 键盘挡住输入框内容
1、通过绑定窗口改变事件,监听键盘的弹出。然后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。所以我们位移的距离改成键盘的二分之一就可以了

[JavaScript] 纯文本查看 复制代码

window.onresize = function(){
    //$(".mian")就是固定定位的元素
	if($(".mian").css('top').replace('px','') != 0){
		$(".mian").css('top',0);
	}else{
		var winHeight = $(window).height();
		$(".mian").css('top',-(winHeight/4));
	}
}

2、通过定时器实时监听是否触发input。如果触发input框 就把固定定位，改变成静态定位。这样就会浏览器会总动把内容顶上去

[JavaScript] 纯文本查看 复制代码

function fixedWatch(el) {
    //activeElement 获取焦点元素
	if(document.activeElement.nodeName == 'INPUT') {
		el.css('position', 'static');
	} else {
		el.css('position', 'fixed');
	}
}
 
setInterval(function() {
	fixedWatch($('.mian'));
}, 500);