正文
ios safari input fixed 软键盘里的爱恨情仇
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
请看第一题：
为什么我的input获取焦点后，被输入法遮住了。
解决办法：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.0.js"></script>
<style>
input{display: block}
</style>
</head>
<body>
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
<input type="text" value="123456">
</body>
<script>
//处理input输入框被输入法遮住
function inputIos(inputBox){
var inputF = $(inputBox).find('input');//找到对应的input
if(inputF == document.activeElement){
//获取焦点时用喔
setTimeout(function(){
var inputIsNotInView = notInView(),
Width = window.innerWidth,
Height = window.innerHeight;
if(inputIsNotInView){
if(Width != 750){
var bottomAdjust = (Height - window.innerHeight - 88) + 'px';
$(inputBox).css('bottom',bottomAdjust);
}else {
var bottomAdjust = (Height - window.innerHeight - 88 - 432) + 'px';
$(inputBox).css('bottom',bottomAdjust);
}
}
},600); }else {
//失去焦点时用喔
var inputIsNotInView=notInView();
if(inputIsNotInView){
$(inputBox).css({'opacity':0,bottom:0});
setTimeout(function(){
$(inputBox).css('opacity',1);
},600)
}
} //------------------------------
function notInView(){
var bottom = inputBox.getBoundingClientRect().bottom;
if (window.innerHeight - bottom < 0){
return true;
}else {
return false;
}
};
}
</script>
</html>
一向如此任性，从不解释为什么，为什么？这是去年的代码，所以，我也忘了……
请看第二题：
今天一个辞职很久的前端姐姐问我一个在ios safari浏览器中为什么我的css为position：fixed的header居然被软键盘干没了。
于是我花了将近半小时，借了一部传说中的5s开始了实验。
于是，请看源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>因为爱情</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,
user-scalable=no">
<style type="text/css">
body{position:relative}
header{position:fixed;top:0;left:0;background:yellow;}
main{height:500px;overflow:scroll}
</style>
</head>
<body>
<header id='head'>我就是骄傲的头部！我不动！</header><main style=''>
<div style='background:red;height:300px;'></div>
<div style='background:green;height:300px;'></div>
</main>
<footer>
<input type="text" value='我就在这里' id='input'/>
</footer>
</body>
<script type="text/javascript" src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript">
$('#input').on('focus',function(){
$("#head").css("position", "absolute");
window.onscroll=function(){
var top = $(document).scrollTop();
$("#head").css("top",top);
}
/* setTimeout(function(){},1500) */
}).on('blur',function(){
$('header').css({
"position":"fixed",
'top':0,
'left':0
})
})
</script>
</html>
因为是刚刚写的，所以我有话说：
首先百度了也google了。发现是苹果的bug，这个bug没啥好解释的，比较恶心就是了，他的软键盘在input获取焦点后弹起，然后就将我的"position":"fixed",硬生生掰成了"position", "absolute"；这让我这个直男怎么可以接受！
你这个样子，我只好将计就计了。
于是我就发现了滚动条高度，然后做一个滚动条监听事件，然后这样平滑的解决了header被顶出去的bug。当然，失去焦点的时候，我们的fixed还是可以正常使用的。
嗯，就这样，我是宋宇，如果不小心帮助到了你，我很荣幸。
