ios11 input和fixed的不兼容（光标错位）

最新推荐文章于 2024-08-26 17:09:31 发布

原创最新推荐文章于 2024-08-26 17:09:31 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

IOS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了解决iOS11中fixed定位输入框点击输入时光标和输入框位置错位的问题，通过将定位改为absolute，动态调整弹出框top值，阻止页面滚动并处理触摸事件来确保输入体验。

在ios11的的手机里，一个弹出输入框是fixed定位的话，点击输入会发下光标和输入框的位置错位，导致无法输入。
1.把fixed定位改成absolute的定位
2.监听弹出框的时候页面滚动的高度，动态设置弹出框的top值

var initTopH = function() {
			var tempH = $(".van-dialog").height(); //弹框高度
			var screenH = $(window).height(); //手机屏幕高度
			var scrollH = $(document).scrollTop(); //文档滚动高度
			var topH = scrollH + (screenH - tempH) / 2; //top值高度
			//解决当输入键盘未手动关闭时，弹窗的定位问题
			if ($(document).height() - scrollH < screenH) {
				topH = $(document).height() - screenH + (screenH - tempH) / 2;
			}
			return topH;
		};

3.弹出框弹出后阻止页面的滚动,给body加上class

var handler = function(e) {
			e.preventDefault();
			e.stopPropagation();
		}
<style>
.van-overflow-hidden{
	overflow:hidden;
	height:100%;
}
</style>
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {
		passive: false
	});
	document.getElementById("van-overlay").addEventListener('touchmove', this.handler, {
		passive: false
	});
	$("body").addClass("van-overflow-hidden");//

4.以上设置后发现在ios手机里面有些机型，页面还是会滚动我在遮罩层上加了touchmove事件，直接关闭弹出框

$('#van-overlay').on("touchmove",function(e){
					e.stopPropagation();
					_self.codeShow=false;
				})