javascript - iphone的safari在input框focus时, 下面会多出70px问题
本文介绍了javascript - iphone的safari在input框focus时, 下面会多出70px问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
页面是这样的
当我的键盘定位到输入框时, 加上scrollIntoView()之后, 就成这样了
问题就是为什么safari下input和键盘中间多出来那一块, 这个怎么破, 注: 目测这一块是safari底栏的高度
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=no">
<title>测试safari的高度</title>
<style>
body {
background-color: red;
}
input {
position: absolute;
bottom: -50px;
left: 0;
width:100%;
height:50px;
}
#myDiv {
position: absolute;
bottom: 100px;;
}
</style>
</head>
<body>
<input id="myInput" onclick="test()">
<div id="myDiv">
</div>
<script>
function test() {
var myInput = document.querySelector("#myInput");
setTimeout(function () {
myInput.scrollIntoView(true);
}, 1000)
}
</script>
</body>
</html>
解决方案
在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间。 这也是你说的 多出70px 的原因。
解决办法有两个：
可以在文本框获得焦点的时候将fixed改为absolute，失去焦点时在改回fixed，但是这样会让屏幕有上下滑动的体验不太好。
.fixfixed {
position:absolute;
}
$(document)
.on('focus', 'input', function(e) {
$this.addClass('fixfixed');
})
.on('blur', 'input', function(e) {
$this.removeClass('fixfixed');
});
还有一种就是用一个假的fixed的文本框放在页面顶部，一个absolute的文本框隐藏在页面顶部，当fixed的文本框获得焦点时候将其隐藏，然后显示absolute的文本框，当失去焦点时，在把absolute的文本框隐藏，fixed的文本框显示。
.fixfixed {
position:absolute;
}
$(document)
.on('focus', 'input', function(e) {
$absolute..show();
$this.hide();
})
.on('blur', 'input', function(e) {
$fixed..show();
$this.hide();
});
题主可以试一下。;)
这篇关于javascript - iphone的safari在input框focus时, 下面会多出70px问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
