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还是可以正常使用的。

嗯，就这样，我是宋宇，如果不小心帮助到了你，我很荣幸。

原文地址：https://www.cnblogs.com/webSong/p/8118578.html

时间： 2024-10-09 19:29:04

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

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

前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出现 input 被软键盘遮盖或者半遮盖.甚至发送按钮不能点击的状况. 总的来说问题有点小严重. 查阅百度: 好的,百度一搜,哇!解决方案很多,我就放心的去抽了一根烟,想着分分钟完事.BUT 经过试验 百度 “ios 下input 被软键盘遮盖” 前两页没有一个能解决我的问题的!!! 不过收获还是有的

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

[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的时候:两位大侠瞬间发生剧烈的化学反应,出现各种奇葩问题,见下图: [结论]输入框position属性值不是fixed,而变成了absolute [出现情况]当我们唤起键盘的时候,输入框位置不再页面最下面,或者说页面当时还可以继续往下滚动,再或者页面没有滚动到最下边,这个时候就会出现上面的问题 [学习

手机端上点击input框软键盘出现时把input框不被覆盖，显示在屏幕中间

1  用定位为题来解决var oHeight = $(document).height(); //浏览器当前的高度      $(window).resize(function(){ if($(document).height() < oHeight){                 $("#footer").css("position","static");    }else{                 $("#foot

ios下input focus弹出软键盘造成fixed元素位置移位

正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3已修复),当软键盘关闭时,头部结构位置又恢复正常 安卓手机下,fixed表现要比ios好,不会出现此问题 然而在移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行,所以寻找css的方法(且js方法比较消耗性能) 各类大网站的解决方法:一般是页面上避免悬挂元素,或者有悬挂元素时,避免产生软键

解决微信H5页面软键盘弹起后页面下方留白的问题（iOS端）

前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失.所以只要在输入完毕后模拟一下这个"滚动"的操作,就能解决问题了. 如果是用vue写的: <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //me

解决IOS safari在input focus弹出输入法时不支持position fixed的问题

该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed).我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上.效果如图(图片来源于网上): 而Androi

ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法

一.实现点击按钮弹出层和点击空白处隐藏层,event.stopPropagation()是关键,阻止传导. <script type="text/javascript"> $(function () { $('#btnShow').click(function (event) { event.stopPropagation(); $('#div_apply').toggle(); }); $(document).click(function (event) { $('#di

周记3——解决fixed属性在ios软键盘弹出后失效的bug

这周在做空间("类似"qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大部分情况把fixed变成了absolute.为什么说是绝大部分情况下而不是100%,后面会提到.下面介绍2种方案... 1.css布局 (推荐) 解决思路:既然在 iOS 下由于软键盘唤出后,页面 fixed 元素会失效,导致跟随页面一起滚动,那么假如--页面不会过长出现滚动,那么即便 f

针对软键盘挡住input输入框的问题

思想是:注册登录的高度自适应,在页面加载完成时,设定页面高度为可视区的高度,在js里检测安卓还是苹果,苹果不用做操作,安卓则隐藏input框上面的logo, //软键盘 $(function(){ //本来body设置100%,防止body变化,设置body高度为可视区域高度: $('body,html').height(window.innerHeight); // 对手机是安卓进行变化 if(browser.versions.android){ $('.inputText').focus(f