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. AJAX（Asynchronous JavaScript And XML）

    AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...

  2. 吴裕雄--天生自然C语言开发：enum(枚举)

    enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; en ...

  3. 邪恶的csrf

    关于csrf是啥我就不多说了 进入正文 场景模拟 场景一 在一个bbs社区里,用户在发言的时候会发出一个这样的GET请求: #!html GET /talk.php?msg=hello HTTP/1. ...

  4. Qt HWND的句柄与QWidget的转换

    QT中用到HWND的句柄在编程中遇到了问题,第三方API用了hwnd类型做形参,但是QT中又没有该类型,可以做如下操作来解决问题. 在.h中先声明: HWND m_hWnd; 再声明 public: ...

  5. PAT甲级——1061 Dating

    1061 Dating Sherlock Holmes received a note with some strange strings: Let's date! 3485djDkxh4hhGE 2 ...

  6. pycharm debug的操作

    ###################################### """ pycharm的debug按钮是右上角的一个小虫子, debug,要打断点,debu ...

  7. listening-conversation|信息简写|Generally|回答|矛盾

    听力可以刷分,但是要求高.听力流程是听.笔记.读题和确定答案,不能回看.Conversation快速且不完整.素材内容主要是生命科学,社科(人类学:考古学),艺术,自然科学(地质). 难点分析: 词汇 ...

  8. Wanna go back home

    题目描述 Snuke lives on an infinite two-dimensional plane. He is going on an N-day trip. At the beginnin ...

  9. 84）PHP，SQL注入基础讲解

     怎么预防: 填写防止SQL注入的代码:

  10. TPO1-1 Groundwater

    If the pores are large,the water in them will exist as drops too heavy for surface tension to hold,a ...