请看第一题：

　　为什么我的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. wordpress初始化安装

    数据名,用户名,密码的选择: 从主机购买商的控制面板里面查询: 然后填入到WordPress数据库初始化页面..

  2. 手脱ACProtect v1.35(有Stolen Code)

    1.载入PEID ACProtect v1.35 -> risco software Inc. & Anticrack Soft 2.载入OD,需要注意的是,异常选项除了[内存访问异常] ...

  3. gulp教程之gulp-autoprefixer

    现在浏览器的种类很多,不同浏览器的内核不同,同一浏览器也有很多不同的版本,很多css属性为了兼容浏览器需要加上特定的前缀,比如chrome的前缀是-webkit-,firefox前缀是-moz-等. ...

  4. 「LibreOJ β Round #4」子集

    https://loj.ac/problem/526 题目描述 qmqmqm有一个长为 n 的数列 a1,a2,……,an,你需要选择集合{1,2,……,n}的一个子集,使得这个子集中任意两个元素 i ...

  5. <LC刷题二>回文字符串判断之leetcode125&234

    其他刷题记录见博客首页 1,leecode125 验证回文串 原题: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. ...

  6. em与px区别-CSS教程

    在现在的网页设计中,网页设计者都非常注重用户体验.而CSS中,font-size使用em还是px,如果选择不好将会影响到我们的用户体验.大部分的网页设计者认为px比em容易使用,或者有些根本就不知道e ...

  7. Global.asax文件—ASP.NET细枝末节（1）

    说明 Global的解释是全局的.全球的. Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法.你可以使用这个文件实现应用 ...

  8. Intersection(HDU5120 + 圆交面积）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5120 题目: 题意: 求两个圆环相交的面积. 思路: 两个大圆面积交-2×大圆与小圆面积交+两小圆面 ...

  9. mybatis笔记之使用Mapper接口注解

    1. mybatis支持的映射方式 mybatis支持的映射方式有基于xml的mapper.xml文件.基于java的使用Mapper接口class,简单学习一下mybatis使用接口来配置映射的方法 ...

  10. redis笔记之两种持久化备份方式(RDB & AOF)

    Redis支持的两种持久化备份方式(RDB & AOF) redis支持两种持久化方式,一种是RDB,一种是AOF. RDB是根据指定的规则定时将内存中的数据备份到硬盘上,AOF是在每次执行命 ...