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. Log4J基础

    Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式.日志信息的优先级从高到低有ERROR.WARN. INFO.DEBUG,分别用来指定这条日志信息的重要程度: ...

  2. EMD——EEMD——CEEMD语音增强算法基础

    首先,HHT中用到的EMD详细介绍:https://wenku.baidu.com/view/3bba7029b4daa58da0114a9a.html 本文具体参考 https://zhuanlan ...

  3. 吴裕雄--天生自然C语言开发：函数指针

    #include <stdio.h> int max(int x, int y) { return x > y ? x : y; } int main(void) { /* p 是函 ...

  4. D. Array Splitting(后缀数组）

    You are given an array

  5. overflow text-overflow 超过部分隐藏问题

    overflow:是针对容器内所有的数据溢出的一种统一处理方式,不管容器内的存储的是文本 图片还是其他的数据 统一取值; hidden隐藏, scroll滚动条显示,visible溢出显示text-o ...

  6. linux系统权限（基本权限）

    linux的系统权限:r--  100 4-w- 010 2--x  001 1 [root@localhost ~]# ll -d dir drwxrwxrwx root root Nov : di ...

  7. @Transactional回滚问题（try catch、嵌套）

    Spring 事务注解 @Transactional 本来可以保证原子性,如果事务内有报错的话,整个事务可以保证回滚,但是加上try catch或者事务嵌套,可能会导致事务回滚失败.测试一波. 准备 ...

  8. 2）PHP代码运行过程

    https://zhidao.baidu.com/question/544575728.html

  9. python-django项目基础-haystack&whoosh&jieba_20191124

    全文检索框架和搜索引擎的安装和配置: 安装全文检索框架,pip install django-haystack, 安装搜索引擎,pip install whoosh settings里面配置 1,注册 ...

  10. 在CentOS安装CMake （CentOS7 64位适用）

    在CentOS安装CMake 转自:http://www.cnblogs.com/mophee/archive/2013/03/19/2969456.html 一.环境描述 1.系统:CentOS 6 ...