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 ...

随机推荐

Spring quartz定时任务service注入问题
今天想单元测试一下spring中的quartz定时任务,job类的大致结构和下面的SpringQtz1类相似,我的是实现的org.quartz.Job接口,到最后总是发现job类里注入的service ...
AngularJs附件上传下载
首先:angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传. 第一步: ...
分块+lazy 或者线段树+lazy Codeforces Round #254 (Div. 2) E
E. DZY Loves Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
复制自身程序到windows目录和system32目录下
功能:复制自身到windows目录和system32目录下. 参考代码: #include <stdio.h> #include <windows.h> void CopySe ...
课程设计——利用信号量实现哲学家进餐问题（JAVA）
package cn.Douzi.PhiEat; /** * 表示筷子的类 */ public class Chopstick{ /** * 表示筷子是否可用 */ private volatile ...
Flex布局（伸缩盒布局）
Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型.由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-blo ...
DevExpress 常用命令包括导出-打印-打印预览等
3.表格打印也是最常见的,打印代码如下: PrintingSystem ps = null; DevExpress.XtraPrinting.PrintableComponentLink link = ...
【BZOJ】2820: YY的GCD
[题意]给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对.T<=10^4,N,M<=10^7. [算法]数论(莫比乌 ...
HDU 2159 FATE (dp)
题目链接 Problem Description 最近xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd开始对杀怪产生的厌恶感,但又不得不通过杀怪来升完这最 ...
2017ACM暑期多校联合训练 - Team 2 1011 HDU 6055 Regular polygon （数学规律）
题目链接 **Problem Description On a two-dimensional plane, give you n integer points. Your task is to fi ...

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

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

随机推荐

热门专题