H5在部分iOS系统中软键盘收起页面不回落、input输入内容显示不全解决方法

1.部分iOS系统中软键盘收起H5页面不回落

项目中遇到了，页面中input框输入信息软件盘弹起，输入完成后，点击确定，软件键盘收起时，发现页面底部滚动到上面，底部留白，页面不会弹到底部。解决方法如下：

    // 解决H5页面ios软键盘收回页面卡半屏问题
	$("input,select").blur(function() {
		var u = navigator.userAgent;
		if (u.indexOf('iPhone') > -1) {
			//苹果手机
			setTimeout(() => {
				const scrollHeight = document.documentElement.scrollTop ||     
                document.body.scrollTop || 0;
				window.scrollTo(0, Math.max(scrollHeight - 1, 0));
			}, 100);
		}
	})
    //解决H5页面安卓机型中软键盘收回页面卡半屏问题
	const el = document.documentElement || document.body
	const originHeight = el.clientHeight
	window.addEventListener('resize', () => {
		const resizeHeight = el.clientHeight
		if (resizeHeight < originHeight) {
		} else {
			$("input,select").blur()
		}
	}, false)

2.部分iOS机型中input输入内容显示不全

在ios系统上聚焦input输入框输入文字，只有第一个字能显示，后面的字都无法显示，只有光标在动
收起键盘，失焦后显示正常

（1）一个很蠢但有效的解决方法，强制页面做了细微的滑动

  $(document).on('input', 'input[name=name]',function (e) {
    let index = $('input[name=name]').val().length * 0.01,
       _top = $(".edit_modal").scrollTop();
    e.target.scrollIntoView(true);
    $(".edit_modal").animate({ scrollTop: _top + index + 'px'}, 0);
  })      

（2）给输入框加个聚焦事件：

handleFocus(e) {
    setTimeout(function() {
        e.target.scrollIntoView(true)
        e.target.scrollViewIfNeeded()
    }, 200)
}

 

只是浅陋，如果有写的不正确或更好的方法、欢迎留言拍砖！

本文地址：https://blog.csdn.net/qq_41725450/article/details/109363348