移动端-H5输入框在弹起键盘后被遮挡问题

原因分析：

点击输入框，页面弹起输入框整个body的高度就被压缩了，并且没有设置滑动，页面的元素被挤到了一块，导致下面的购买按钮被挤上来了

解决方案：

给整个页面设置min-height,并且设置滑动

body,html {
    position: relative;
    width: 100%;
    overflow-y: auto;
    height: 100vh;
    min-height: 640px;
}

/* 购买按钮 */
.footer {
    width: 90%;
    position: absolute;
    bottom: 50px;
    left: 5%;
}

移动端-H5输入框在弹起键盘后被遮挡问题相关推荐

一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现...
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
解决安卓H5输入框获取焦点软键盘页弹起，页面高度被压缩问题
在移动项目开发中经常会遇到输入框获取焦点软键盘页弹起,页面高度被压缩,输入框获取焦点时弹不上去的问题,我本次的是vue的UI框架(vux) 解决办法如下代码: 只要在页面初始化完成的时候,获取屏幕的可 ...
移动端H5页面关于软键盘的一些踩坑记录
最近一个项目需要做一个留言的功能,需求很简单,点击留言按钮底部弹出留言框,然后发送留言给后台就行了,还有一个就是页面要实现复制功能.讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug,不过需 ...
Android开发之自定义输入框无法弹起键盘输入法的解决方法
通常在开发需求中,在很多场景下我们需要手动吊起输入法功能,但是偶尔会发现在自定义EditText输入框中有时候会无法弹起输入法,举个我遇到的场景: 第一次进入此页面要求立马获取输入框焦点并且弹起输入法 ...
css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
移动端h5页面软键盘弹出后背景图片被顶上去
移动端h5页面在软键盘弹出后,body的高度被压缩了,就导致原本高度100%的背景图被顶上去一截,需要把div的高度强行设回100%才能解决这个问题 <div class="app&q ...
移动端h5唤起键盘_移动端H5界面打开后，如何自动调用软键盘
test(){ // let aa = this.$refs.input1.blur(); // this.$nextTick((x)=>{ //正确写法 // // this.$refs.in ...
H5-input弹起键盘遮盖输入框(Android)、键盘弹起后不恢复(IOS)
安卓机问题: 页面完成之后发现在Android上软键盘的弹起并不会像IOS一样带动页面的弹起,而是在原有位置遮盖了输入框,表现如下(有光标的input在弹起键盘时被遮住): iOS机问题在input ...
移动端H5页面，关闭手机键盘！
标题移动端H5页面,关闭手机键盘! 最近在手机端页面遇到当点了输入框后弹出手机键盘,当关闭当前弹框页面后手机键盘未关闭. 解决方案: document.activeElement.blur(); 注 ...

移动端-H5输入框在弹起键盘后被遮挡问题

移动端-H5输入框在弹起键盘后被遮挡问题相关推荐

最新文章

热门文章