方法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);
			})
		}
}
Logo

前往低代码交流专区

更多推荐