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下 input 被软键盘方案遮盖问题解决
前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...
input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景
微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码后台框架嵌入iframe的情景,iframe内部 ...
web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG，完美解决
[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...
ios移动输入框被软键盘遮挡
页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this) ...
iOS自动自动隐藏软键盘
自动隐藏软键盘,分为两步,一个是单击软键盘外部任意空间:另外一个是单击软键盘上的return键.下面依次实现单击软键盘外部空间键隐藏软键盘: 一:在viewDidLoad中添加一个UITabGest ...
ionic 项目中ios上遇到的软键盘输入法自动弹出的问题
一. 安装插件 cordova plugin add ionic-plugin-keyboard 二. 软键盘显示监听 window.addEventListener('native.keyboar ...
移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...
fixed固定时弹窗上的input被软键盘遮住的问题
<div class="pwhCover"> <div class="pwhCon"> <div class="pwhT ...

随机推荐

HDU 4638 莫队算法
Group Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
Java Socket TCP编程（Server端多线程处理）
package com; import java.io.*; import java.net.Socket; /** * Socket Client * <p> * Created by ...
服务器上 tomcat 配置了 tomcat-users 但是还是 403 的问题
默认情况下,tomcat 限制了只能本机访问如果我们想要修改这个设置: 编辑 webapps/manager/META-INF/context.xml <!--<Valve classN ...
Kubernetes 1.5部署sonarqube
前面几篇博文我们一直在说kubernetes的基础环境的安装及部署.在基础环境部署完成以后,我们开始尝试使用kubernetes来管理我们的应用.本篇博文通过一个简单的示例来向大家展示如何通过depl ...
从一个集合中过滤另一个集合中存在的项(类似in)
直接贴代码出来: List<PriceMark> list = PriceMarkDAL.m_PriceMarkDAL.GetList("Erp_ProName='TLC7528 ...
(function($){})(jQuery)---Javascript的神级特性:闭包
function($){}实际上是匿名函数这就定义了一个匿名函数,参数为arg function(arg){ //code } 而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数 ...
Spring容器简介
Spring 是面向 Bean 的编程(BOP,Bean Oriented Programming),提供了 IOC 容器通过配置文件或者注解的方式来管理对象之间的依赖关系. 控制反转模式(也称作依赖 ...
javascript中各类的prototype属性
prototype 作用:获取调用对象的对象原型引用应用:可以为某对象原型添加方法例: function getMax() { var max = this[0]; for(var x=0; x& ...
【Foreign】减法 [二分][贪心]
减法 Time Limit: 10 Sec Memory Limit: 256 MB Description 给你一个n个数的序列A,并且给出m次操作B. 操作的含义是:每次从A中选出不同的B_i个 ...
【BZOJ4870】组合数问题（计数DP，快速幂）
题意: 1 ≤ n ≤ 10^9, 0 ≤ r < k ≤ 50, 2 ≤ p ≤ 2^30 − 1 思路:From http://blog.csdn.net/qq_33229466/artic ...

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

ios safari input fixed 软键盘里的爱恨情仇的更多相关文章

随机推荐

热门专题