700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > H5 IOS input输入框唤起键盘导致页面元素位置错乱问题

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

时间:2021-10-04 08:33:17

相关推荐

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() {varscrollHeight = 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);})}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。