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

随机推荐

使用Masonry在UIScrollView内布局
理论分析首先,我们知道Autolayout改变了传统的以frame为主的布局思想.它其实是一种相对布局,核心思想是视图与视图之间的位置关系.比如,我们可以根据矩形的起始横坐标.纵坐标.长和宽这四个变 ...
[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 ...
(转) 使用vivado创建工程 2
Build the hardware platform and export to SDK A basic ARM hardware platform is now configured. The c ...
MingW和MSVC默认的编码方式不一样
同一份源代码,源文件编码格式为UTF-8: string tmp = "我"; ;i<tmp.size();++i) { printf("%0x ",tm ...
JavaScript中callee与caller，apply与call解析
1. arguments.callee 1.1 解释返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文. 1,.2 说明 callee 属性的初始值就是正被执行的 ...
最小生成树的边的概念问题！！！最小生成树的计数 bzoj 1016
1016: [JSOI2008]最小生成树计数 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 5292 Solved: 2163[Submit][St ...
Python学习笔记（2.1）函数参数练习
关键字参数和命名关键字参数 # -*- coding: utf-8 -*- def print_scores(**kw): print(' Name Score') print('-------- ...
（三）配置Hadoop1.2.1+eclipse(Juno版)开发环境，并运行WordCount程序
配置Hadoop1.2.1+eclipse(Juno版)开发环境,并运行WordCount程序一. 需求部分在ubuntu上用Eclipse IDE进行hadoop相关的开发,需要在Eclip ...
css3中新增的样式使用方法
在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3 ...
Amcharts 柱状图和线形图
最近需要学习 Amcharts ,他的图表功能确实很强大.但是网上搜索到的教程很少,开始学起的确有点不方便.于是我决定把我学习的觉得好的途径,放到博客上. 下面的代码可以直接复制,但是文件要从官网上下 ...

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

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

随机推荐

热门专题