ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅。
具体情况:弹出层使用position: fixed;弹出层内附带input/textarea输入框,ios11系统的苹果机用户在点击输入框,出现键盘后,弹出层被顶上去,而光标还停留在原处,即出现错位情况。
解决思路:
- 解决光标错位:弹出层设置为position: absolute;body添加position: fixed;
- 弹出层重新定位:获取滚动条高度,设置为弹出层Top值;
function getScrollTop(): string {
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop + 'px';
}
解决过程中碰到的问题:body设置为position: fixed后,一旦弹出层Top属性被赋值,页面会默认回到最顶端,用户体验感极差。
在此基础上决定不设置body的定位,改为overflow: hidden; 等用户执行完操作,关闭弹出层时,再还原overflow: initial; 缺点是弹出层底部的内容无法再进行滚动,但是对用户体验无太大影响。在pc上测试无误后发布test环境,真机测试简直爆炸,底部内容仍旧可以自由滑动,连带着固定在上层页面的弹出层一起不受拘束的自由愉快滑动。
由此发现的坑2:移动端设置body的overflow: hidden不生效,即使附加height: 100%;
顺着思路下去,决定采取阻止页面的touchmove事件来实现固定底部页面的想法
public fixBg() { //阻止页面底部touchmove事件
document.addEventListener("touchmove",function(e){
e.preventDefault();
e.stopPropagation();
},false);
} public flexibleBg() { //恢复touchmove事件
document.addEventListener('touchmove', function (e) {
e.returnValue = true;
}, false);
}
、
from:https://www.cnblogs.com/teLumy/p/8257591.html 解释fixed的好链接 http://efe.baidu.com/blog/mobile-fixed-layout/?utm_source=tuicool&utm_medium=referral 在一个页面中点击一个按钮会出现一个弹出框,这个弹出框给了fixed定位,并且宽高都等于100%,在这个弹出框中有包含input输入框的div,这个div未做定位设置。页面操作中看不出来什么问题,真机操作的时候会发现,安卓上没有问题,但是在ios上就出现问题了,尤其是ios11系统上,问题表现非常明显。在输入框输入内容的时候,手机下方会弹出一个键盘,然后输入框中光标就跟丢了魂似的乱窜,本以为会是个别手机屏幕问题,拿出几个ios测试机,一番简单测试后发现,是普遍存在的问题,尤其在ios11上比较明显。看着那乱窜的光标,瞬间懵十三了。
一番简单查阅,了解到这是在ios上存在的一个坑,前人已经给出了几种解决方案,查看几篇相关技术博客,看了一遍,那写的是毛玩意,顿时心有不畅,然后尝试着按照自己理解的思路去解决,结果成了,光标的魂终于回来了。在此分享下我的解决思路:
如果弹出框是fixed定位,并且弹出框中输入框,那么就很可能会出现这种问题。很简单的解决办法,你把fixed定位去掉,改变你的样式表现方式。我这里是把弹出框改成absolute定位,弹出框的父元素改成relative定位解决的。
ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳的更多相关文章
- selenium选错弹出层的下拉框
要先选中这个弹出层的form元素,再找下拉框 public void downSelectBox(){ driver.get("https://www.imooc.com/user/setp ...
- jquery 点击弹出层自身以外的任意位置,关闭弹出层
<!--弹出层---> <div class="mask"> <div class="wrap"></div&g ...
- js-移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
- 弹出窗口内嵌iframe 框口自适应
说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...
- jQuery弹出层_点击自身以外地方关闭弹出层
<html> <style> .hide{display:none;} </style> <script type="text/javascript ...
- bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入
如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层 打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...
- 用jQuery解决弹出层的问题
在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- 权限管理系统之LayUI实现页面增删改查和弹出层交互
由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...
随机推荐
- centos文件系统变为只读的解决处理
简单粗暴:重启 Linux系统重启或无故变为只读造成网站无法正常访问的简单临时的做法: 一. 1.mount: 用于查看哪个模块输入只读,一般显示为: /dev/hda1 on / type ext3 ...
- python处理点云数据并生成三维点云模型
1.python代码: 1 import numpy as np 2 import matplotlib.pyplot as plt 3 from mpl_toolkits.mplot3d impor ...
- Matlab绘图基础——绘制等高线图
% 等高线矩阵的获取 C = contourc(peaks(20),3); % 获取3个等级的等高线矩阵 % 等高线图形的绘制 contour(peaks(20),10);c ...
- 涉及模式之 装饰器模式详解(与IO不解的情缘)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. LZ到目前已经写了九个设计模 ...
- Jedis操作Redis
Jedis操作Redis的常用封装方法 @Resource(name="jedispool") private JedisPool pool=null; /** * 设置缓存对象过 ...
- 第1次作业:no blog no fun
1.先回答老师的问题 第一部分:结缘计算机 读了进入2012 -- 回顾我走过的编程之路后,我试着回顾了我的编程生涯的开始.我最原始的记忆就是老爸教我用电脑玩连连看,那时候的显示器应该是C ...
- Beta 第三天
今天遇到的困难: 组员对github极度的不适应 github的版本控制和协同化编程确实操作起来需要一定的熟练度,我们缺乏这种熟练度 Android Studio版本不一致项目难以打开的问题仍然无法解 ...
- Linux 目录与文件管理
1. 目录与路径1.1 相对路径与绝对路径1.2 目录的相关操作: cd, pwd, mkdir, rmdir1.3 关于执行文件路径的变量: $PATH2. 档案与目录管理2.1 档案与目录的检视: ...
- 《高级软件测试》11.15.全组完成jira安装,开始任务的部分书写
今日任务完成情况如下: 小段:完成linux环境上jira的安装,并将jira的安装过程录制下来 小费:完成linux环境下jira的安装,开始部分任务的书写 小高:完成了jira的安装,并进一步熟悉 ...
- 2017北京国庆刷题Day1 afternoon
期望得分:100+100+100=300 实际得分:100+100+100=300 T1 一道图论好题(graph) Time Limit:1000ms Memory Limit:128MB 题目 ...