移动端输入键盘掉落,但页面不掉落
时间:2023-04-05 18:12:07
HTML5
问题描述移动端项目,当前页面只有一个输入框,填写内容后,点击提交,键盘落下,页面未down后会有弹框,如果页面未down,弹框显示有问题,点击弹框按钮不要设置height:100%;overflow:hidden;否则在Android端点击input,页面上不去,页面无法滚动,可能会挡住【Exchange】按钮。需要先收起键盘,再点击按钮,影响用户体验~使用兑换码使用兑换码
//SCSS$base-font-size:37.5px;@functionpx2rem($px){@return($px/$base-font-size)*1rem/2;}.convert-code-wrapper{宽度:100%;背景色:#fff;位置:相对;.cc-header{width:calc(100%-#{px2rem(60px)});字体大小:px2re米(34px);颜色:#000;高度:px2rem(98px);文本对齐:居中;行高:px2rem(98px);填充:px2rem(30px)px2rem(30px)0;背景色:#fff;位置:固定;顶部:0;}.cc-main{宽度:100%;填充顶部:px2rem(128px);背景:url(../../XXX/bg-home.png)不重复顶部#fff;背景大小:100%自动;溢出:隐藏;.cc-unchange{不透明度:.4;}img,输入{显示:块;保证金:自动;}img{宽度:px2rem(696px);高度:自动;顶部边距:px2rem(118px);}输入{边框:无;大纲:无;填充:px2rem(20px)px2rem(50px);宽度:px2rem(420px);高度:px2rem(50px);行高:px2rem(50px);字体大小:px2rem(34px);字体粗细:300;颜色:#333;背景:url(../../XXX/bg-btn.png)无重复中心#fff;背景大小:100%100%;边界半径:px2rem(45px);溢出:隐藏;}input::-webkit-input-placeholder{颜色:#999;}:-moz-placeholder{颜色:#999;}::-moz-placeholder{颜色:#999;}:-ms-input-placeholder{颜色:#999;}p{宽度:px2rem(520px);高度:px2rem(90px);行高:px2rem(90px);文本对齐:居中;字体大小:px2rem(34px);颜色:#fff;背景色:#20a3ff;边界半径:px2rem(45px);溢出:隐藏;边距:px2rem(50px)自动;&.cc-unchange{不透明度:.4;}}}}解决方法一(网上流传的方法,但对我不起作用)$("input").on("blur",function(){window.scroll(0,0);//失去焦点后强制返回页面});第二个(可以解决)
//数据定义isDown:true//收回键盘downKey(){lettimer=setTimeout(()=>{clearTimeout(timer)document.documentElement.scrollTop=document.body.scrollHeightdocument.body.scrollTop=document.body.scrollHeightthis.isDown=true},20)}//点击交换change(){if(!this.isDown)this.downKey()//xxxxx}如果只是在input中添加了一个失焦事件,用户输入后直接点击按钮数据,失焦事件可能不起作用,所以需要在提交事件中加入判断。