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位置都能一劳永逸
相关资源
- https://bugs.webkit.org/show_... （Wrong caret position for input field inside a fixed position parent on iOS 11 ）
原文地址：https://www.cnblogs.com/baimeishaoxia/p/11824162.html
时间： 2024-08-05 09:26:17