ios safari input fixed 软键盘里的爱恨情仇

Posted webSong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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还是可以正常使用的。

嗯，就这样，我是宋宇，如果不小心帮助到了你，我很荣幸。

以上是关于ios safari input fixed 软键盘里的爱恨情仇的主要内容，如果未能解决你的问题，请参考以下文章

IOS安卓常见问题

iOS9 mobile safari Landscape css bug with position: fixed;

各浏览器 position: fixed 造成的bug 通用解决办法，Safari, iOS

iPhone 6+ Mobile safari iOS 8 Landscape with tabs open and Bootstrap navbar-fixed-top 在打开时不会关闭

[BUG]ios中input不回弹，导致fixed布局错位

iOS下的 Fixed + Input BUG现象