请看第一题：

　　为什么我的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 软键盘里的爱恨情仇的更多相关文章

  1. IOS下 input 被软键盘方案遮盖问题解决

    前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...

  2. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  3. 页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景

    微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...

  4. web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG，完美解决

    [问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...

  5. ios移动输入框被软键盘遮挡

    页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this) ...

  6. iOS自动自动隐藏软键盘

    自动隐藏软键盘,分为两步,一个是单击软键盘外部任意空间:另外一个是单击软键盘上的return键.下面依次实现 单击软键盘外部空间键隐藏软键盘: 一:在viewDidLoad中添加一个UITabGest ...

  7. ionic 项目中ios上遇到的软键盘输入法自动弹出的问题

    一.  安装插件 cordova plugin add ionic-plugin-keyboard 二. 软键盘显示监听 window.addEventListener('native.keyboar ...

  8. 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

    场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...

  9. fixed固定时弹窗上的input被软键盘遮住的问题

    <div class="pwhCover"> <div class="pwhCon"> <div class="pwhT ...

随机推荐

  1. VMware 与Ubuntu通过samba服务器共享文件

    Linux和windows在虚拟机下文件共享有很多种方式,常用的有使用VMware Tools共享和Samba服务器进行共享,使用VMware Tools这里就不说了,我使用的是Samba服务器. 其 ...

  2. openssl生成https证书、转换证书格式的各种相关操作

    第一步:生成 private key.csr等文件 我们可能需要输入以下信息(交互式): --- Country Name (2 letter code) [AU]:US State or Provi ...

  3. [Z3001] connection to database 'zabbix' failed: [1045] Access denied for user 'zabbix'@'localhost' (using password: YES)

    在配置了zabbix服务端后,发现:“zabbix server is running”的Value值是“no”, 用:netstat -atnlp|grep 10051 发现没有出现zabbix_s ...

  4. Linux下UDP一发一收通信

    实现在Linux环境下的UDP通信测试. 注释了while循环,将代码规范化. udpserver.c代码: /******************************************** ...

  5. 前端PHP入门-023-重点日期函数之程序执行时间检测

    我们有的时经常需要做程序的执行时间执行效率判断. 实现的思路如下: <?php //记录开始时间 //记录结整时 // 开始时间 减去(-) 结束时间 得到程序的运行时间 ?> 可是大家不 ...

  6. [DeeplearningAI笔记]序列模型2.7负采样Negative sampling

    5.2自然语言处理 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.7 负采样 Negative sampling Mikolov T, Sutskever I, Chen K, et a ...

  7. thinkphp 5 where 组合条件map数组or

    if($inviterId>0) { $arr = Db::table("tablename")-> where("pid=$inviterId") ...

  8. 数学：Nim游戏和SG函数

    有若干堆石子,两人轮流从中取石子,取走最后一个石子的人为胜利者 以下的性质是显然的 .无法移动的状态是必败态 .可以移动到必败态的局面一定是非必败态 .在必败态做所有操作的结果都是非必败态 在普通Ni ...

  9. JS获取列表索引值

    html部分 <ul id="test"> <li>111</li> <li>222</li> <li>33 ...

  10. 【BZOJ】4764: 弹飞大爷 LCT

    [题意]给定n个数字ai,表示大爷落到i处会被弹飞到i+ai处,弹飞到>n或<1处则落地.m次操作,修改一个ai,或询问大爷落到x处经过几次落地(或-1).n,m<=10^5,|ai ...