fixed定位 input在IOS设备上光标位置异常问题

时间:2024-03-21 21:05:21

页面是个长页面,点击页面不同部分,会弹出弹窗,如果用absolute定位,那么弹窗的位置就难以定位,因而决定采用fixed定位,此时在IOS 11.2.x 系统中就 会出现点击input光标位置异常的问题。

异常如图所示:
fixed定位 input在IOS设备上光标位置异常问题

原因分析

input的父元素是采用fixed定位的元素,此时input输入框在IOS系统存在bug,input元素获得焦点,吊起键盘的时候,页面上fixed定位的元素会被上推,但是光标却留在了原地,造成错位的现象。

解决方案

当点击**弹窗按钮的时候,给body设置fixed定位,让其也脱离标准流文档,关闭弹窗的时候,让其恢复relative定位。
代码示意:

body {
	position: relative;
}

body.fixed {
	position: fixed;
	width: 100%
}
//打开弹窗
openBtn.tap(function(){
	$('body').addClass('fixed')
})

//关闭弹窗
closeBtn.tap(function() {
	$('body').removeClass('fixed')
})

这里会存在一个小小的问题,就是弹框弹出后,初次点击一次input框的时候,会弹出键盘,能正常输入,但是光标不显示,如果点击两次input输入框,就会显示光标。

弹出了键盘,能输入,但是光标不显示:

fixed定位 input在IOS设备上光标位置异常问题

再次点击,就一切正常:

fixed定位 input在IOS设备上光标位置异常问题



后来咨询了一些前端童鞋,很多是采用这种方式,点击一次光标不显示的问题,系系统BUG,后续IOS版本,苹果已经修复该BUG。

目前采用以上方式,如果发现有更好的方式,会后续更新。