H5 IOS input输入框唤起键盘导致页面元素位置错乱问题

方法1：vue项目

// 输入框获得焦点时触发
    focus() {
      this.timer.T = setInterval(() => {
        // 完美解决输入框被软键盘遮挡
        this.$refs.footer.scrollIntoView(false)
      }, 200)
    },
    blur() {
      // 输入框失去焦点时清除定时器
      clearInterval(this.timer.T)
    }

H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位

解决方案：给输入框（或select选择框）添加失去焦点的事件，当输入框失去焦点，页面自动滚动到顶部，并且需要加定时器，否则偶尔会失效

//blur失去焦点事件

$("input,select,textarea").blur(function(){

        setTimeout(function() {

                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

                window.scrollTo(0, Math.max(scrollHeight - 1, 0));

            }, 100);

    })

方法：3 jq项目

 

/**
 * 处理ios输入框的问题
 */
function IOSInput() {
		if (os.ios) {
			var itimer;
			document.body.addEventListener('focusin', function () {
				setTimeout(function () {
					clearTimeout(itimer);
				}, 200);
			})
			document.body.addEventListener('focusout', function () {
				itimer = setTimeout(function () {
					$("body").scrollTop(0)
				}, 300);
			})
		}
}