龙空技术网

解决安卓手机H5页面input获得焦点时页面挤压或者底部上移

NativeBase 59

前言:

今天咱们对“h5移动页面”大致比较珍视,同学们都想要剖析一些“h5移动页面”的相关资讯。那么小编同时在网络上搜集了一些关于“h5移动页面””的相关内容,希望朋友们能喜欢,姐妹们快快来学习一下吧!

在安卓手机上,如果底部有一个定位的元素 比如一个input 或者一个 footer 在正常情况下是没有问题的,

但是一旦input获得焦点,那么定位元素会被软键盘向上推,ios手机没有问题

此时解决办法如下:

先判断手机类型,因为如果不判断的话 ios会被影响。

    window.onload = function () {        var u = navigator.userAgent;        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机            //  拿到获取焦点的input            let input = document.querySelector('input')            input.addEventListener('focus', function () {                setInterval(function () {                // 核心                    input.scrollIntoView(false);                }, 200)            })        }    }
vue h5移动端Ios软键盘遮挡input输入框导致页面不能自动向上滚动的bug

关键代码

window.addEventListener('resize', function() {  if (      document.activeElement.tagName === 'INPUT' ||      document.activeElement.tagName === 'TEXTAREA'  ) {    window.setTimeout(function() {      if ('scrollIntoView' in document.activeElement) {        document.activeElement.scrollIntoView(false)      } else {        document.activeElement.scrollIntoViewIfNeeded(false)      }    }, 0)  }})
vue--ios手机input点击手机输入键盘顶起页面解决方案
<input type="text" placeholder="请填写手机号" maxlength="11" v-model="phone" @focus="getFocus" />getFocus() {	$("input").on("blur", function() {		window.scroll(0, 0);	});},

标签: #h5移动页面 #inputtype下拉框 #h5 ios键盘弹出 布局上移 #手机调试h5页面 #h5输入框怎么设置