用户登录
用户注册

分享至

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

  • 作者: MrG37088382
  • 来源: 51数据库
  • 2021-08-30

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)
}

?

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

软件
前端设计
程序设计
Java相关