input 光标位置乱窜

固定式浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面

可触发条件

  • 页面body出现滚动条
  • 点击页面出现用fixed定位的弹框，弹框内有输入框，键盘弹起，页面发生滚动
  • 键盘弹起后手动滚动页面

通过调试工具发现键盘弹起视图向上调整了，但页面中元素所占的位置，其实并没有向上进行调整；输入框所占的位置还是原来键盘未弹起时的位置

input位置

原因

  •  软键盘唤起后，页面的 fixed 元素将失效，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了

不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题

解决思路

 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，倘若页面不会过长出现滚动，即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了

.content {

    /* main绝对定位，进行内部滚动 */

    position: absolute;

    top: 0;

    bottom: 0;

    right:0;

    left:0;

    /* 使之可以滚动 */

    overflow-y: scroll;

    /* 增加该属性，可以增加弹性 */

    -webkit-overflow-scrolling: touch;

}

<body>

    <div class="content">

       <!-- 内容在这里... -->

    </div>

</body>

这样不管是弹框里的input还是input位置都能一劳永逸

相关资源

iOS下的 Fixed BUG的更多相关文章

  1. iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...

  2. web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

    1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...

  3. 记一次事件委托在 ios 下的兼容 bug

    项目中碰到的兼容类 bug,记录一二. 页面上有几个同类型的控件,点击它们会触发一些事件,很显然,事件委托优于批量绑定.为了图方便,我将 click 事件绑定到了 document.body 上(绑定 ...

  4. new Date在ios下的兼容bug

    今天发现在ios下new Date("2019-03-06").getTime()返回NaN 原因是ios下不支持“-”必须用"/" 记录备忘 var d = ...

  5. 移动端 常见问题整理 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    使用iScroll时,input等不能输入内容的解决方法 <script> function allowFormsInIscroll(){ [].slice.call(document.q ...

  6. 偏前端 - ios下position:fixed失效的问题解决

    如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...

  7. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  8. ios下fixed回复框bug的解决方案

    前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...

  9. ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

随机推荐

  1. 闭包,协议delegate

    1.定义 //1.闭包表达式语法 { (parameters) -> returnType in statements } let names = ["Chris", &qu ...

  2. PictureService

    package me.zhengjie.tools.service; import me.zhengjie.tools.domain.Picture; import org.springframewo ...

  3. vim模式及基础命令

    VIM基本介绍vi和在修改vim命令是linux中强大的文本编辑器,由于linux系统一切皆文件,而配置一个服务就是在修改其配置文件的参数vim其实是vi的升级版yum install -y vim ...

  4. Qt QLabel show 显示图像、填充、缩放

    主要成员函数: 1.void setText(QString); //设置label框内的文本. 2.void hide(); //隐藏label框. 3.void setBuddy(QWidget* ...

  5. java枚举与常量类的区别

    1)枚举型可以直接与数据库打交道,我通常使用varchar类型存储,对应的是枚举的常量名.(数据库中好像也有枚举类型,不过也没用过) 2) switch语句支持枚举型,当switch使用int.Str ...

  6. Protein interaction|insight QUANTA|SYBYL COMPOSER|MODELLER|SWISS_MODEL|WHAT IF|3D-JIGSAW|CPH-ModelGPCRs|Membrane protein|

    生命组学 蛋白质之间的互作可以有以下应用: Eg:改变蛋白质基因,从而组改变结构,削弱蛋白质之间的相互作用. Eg:数据模拟出蛋白质的靶点,即结合腔,将此数据存入结合化合物的dataset,用于制药 ...

  7. Java IO: 字节和字符数组

    原文链接  作者: Jakob Jenkov   译者:homesick 内容列表 从InputStream或者Reader中读入数组 从OutputStream或者Writer中写数组 在java中 ...

  8. 用ES6和fetch封装网络请求

    导读: fetch: 这个方法是ES2017中新增的特性,这个特性出来后给人一种传统ajax已死的感觉,其实它的作用是替代浏览器原生的XMLHttpRequest异步请求,我们在日常的开发中,基本不会 ...

  9. from PIL import image报错

    python中import PIL可以,但是from PIL import Image就报错? ’‘ 大家在安装pillow的时候,可能会安装成功,但是当运行from pIL import image ...

  10. connect() failed (111: Connection refused) while connecting to upstream报错处理

    新lnmp环境调试项目时,nginx报错如下: 解决: 发现php-fpm.conf是以套接字方式通信,而nginx是以端口方式通信,见下图: 将nginx.conf修改为如下,重新reload即可