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

淡淡的烟草味﹌ 2022-11-21 01:25 1433阅读 0赞

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

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