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 )