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. SpringMVC插件安装、环境配置及快速入门_学习笔记

    SpringMVC 是现在广泛应用的框架结构,我也只是一个初学者,一遍学习一遍梳理整合,如有错误,希望大神指点,别误人. MVC :Model-View-Control 框架性质的C 层要完成的主要工 ...

  2. 一文带你了解BOM基本知识

    1.1. BOM和DOM的区别DOM就是一套操作HTML标签的API(接口/方法/属性) BOM就是一套操作浏览器的API(接口/方法/属性) 1.2. BOM中常见的对象window: 代表整个浏览 ...

  3. linux文件系统与链接

    Linux的文件属性图1 图1   linux的文件属性 ls -lhi -l 长格式 -h 人性化 -i inodo -d 看目录自己的信息 inode 源自于文件系统 分区 平面设计图 格式化 施 ...

  4. [LC] 117. Populating Next Right Pointers in Each Node II

    Given a binary tree struct Node { int val; Node *left; Node *right; Node *next; } Populate each next ...

  5. [LC] 345. Reverse Vowels of a String

    Write a function that takes a string as input and reverse only the vowels of a string. Example 1: In ...

  6. python语法基础-函数-内置函数和匿名函数-长期维护

    ##################     内置函数        #######################  """ 一共是 68个内置函数: 反射相关的内置函 ...

  7. nowcoder-548C-Tachibana Kanade Loves Review

    链接:https://ac.nowcoder.com/acm/contest/548/C来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 524288K,其他语言10485 ...

  8. 89）PHP，跳转练习（1）

    首先是需要两个简单的文件: 目录关系是: 我的beifen.php代码展示,这个先执行: <?php header('Location:b.php'); b.php代码展示: <?php ...

  9. [LC] 236. Lowest Common Ancestor of a Binary Tree

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  10. MOOC（4）- setup和teardown函数

    import unittest class TestRequest(unittest.TestCase): @classmethod def setUpClass(cls): print(" ...