# 一、参考文章

IOS 中 position:fixed 弹出框中的 input 出现光标错位的问题

# 二、出现原因

IOS 下,input 获取焦点时,position:fixed; 属性则会失效, 这个是一个移动端的兼容性问题。

# 三、解决光标定位不准的问题

# 3.1 方案一

原理:弹窗时,设置了 fixed 布局,fixed 会失效,然后页面就会滚动到最顶端,然后这个的解决弊端就是,会滚动到页面顶端

// 弹窗时
$('body').css({ position: 'fixed' })

// 隐藏时
$('body').css({ position: 'relative' })
1
2
3
4
5

# 3.2 方案二

原理和上面的是一样的, 让页面会弹到最顶端

// 弹窗时
var h = $(window).height()
$('body,html').css({ overflow: 'hidden', height: h + 'px' })

// 隐藏时
$('body,html').css({ overflow: 'auto', height: 'auto' })
1
2
3
4
5
6
Last Updated: 12/22/2019, 4:19:58 PM