移动端fixed元素中input文本框弹出虚拟键盘时样式错位(微信内置浏览器,qq浏览器)
代码如下:
$(
'input'
).bind(
"focus"
,
function
(){
$(
"div"
).css({
"position"
:
"absolute"
});
}).bind(
"blur"
,
function
(){
$(
"div"
).css(
"position"
,
"fixed"
);
});
注:
input:获取焦点的文本框;
div:文本框的fixed定位父级;
如果不考虑横竖屏的话,以上代码就ok了,
如果要考虑横竖屏 ,还需加上以下代码:
$(window).bind(
"onorientationchange"
,
function
(){
switch
(window.orientation) {
case
0:
$(
'div'
).css({
'position'
:
'fixed
'
});
break
;
case
-90:
$(
'div'
).css({
'position'
:
'absolute'
});
break
;
case
90:
$(
'div'
).css({
'position'
:
'absolute'
});
break
;
case
180:
$(
'div'
).css({
'position'
:
'fixed'
'
});
break
;
}
});
注:移动端页面如果有输入框,不建议放到fixed定位元素里边,建议使用绝对定位absolute;