先上图

 
 通常在开发中我们会遇到这样输入框被遮挡的问题,那么该怎么解决呢?
方案一(css):

首先,把置底元素设置成,在页面的底部而非屏幕的底部

.page .bottom {
position: absolute;
bottom: 0;
width: 100%;
border: 0;
text-align: center;
z-index: 5;
}

然后,设置页面的高度,让按钮有置底的效果

.page {
background: #fff;
color: #384369;
position: relative;
width: 100%;
overflow-y: auto;
height: 100vh;
min-height: 480px;
}

注意有最小高度,因为当键盘弹起时,100vh是缩小的那部分的高度,而不是屏幕高度
*如果有大屏的需求,适配一下就好

这样,当键盘弹起时,内容就是可以滚动的了,出于用户体验的需求,可以在focus输入框的时候,把滚动条划一下,露出输入框

function whenFocus(){
document.body.scrollTop = document.documentElement.scrollTop =86;
}

具体的数值可以再调整

方案二(css):
<div class="main">
<div class="content"></div>
<button></button>
</div>

设置content为 overflow: auto;
让content的高度为 100vh-buttonHeight

方案三(flex布局):

使用第二种的html

.main{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
.content {
overflow: auto;
}
}
方案四(js):

其实,当移动端弹起键盘的时候会触发window的onresize事件,把webview的高度变小了,知道了这个我们就可以用js来操作

给input或者textarea绑一个onfocus事件

scrollIntoView(v,e){
setTimeout(() => {
window.scrollTo(0, e.target.offsetTop)
},500)
},

注意:当输入框的父元素使用了position:relative的时候,输入框的offsetTop的值就会有问题

移动端键盘顶起遮挡输入框&offsetTop值不准问题的更多相关文章

  1. iOS 键盘弹出遮挡输入框

    #pragma mark 键盘弹出遮挡输入框 //开始编辑输入框的时候,软键盘出现,执行此事件 -(void)textFieldDidBeginEditing:(UITextField *)textF ...

  2. iOS学习——键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发 ...

  3. iOS Android中 h5键盘遮挡输入框的问题和解决方案

    问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内).问题解决: Android 经过测试,Android 的6.0版本以上均会出现改问题,归根到底是之前的 ...

  4. iOS学习——tableview中带编辑功能的cell键盘弹出遮挡和收起问题解决

    最近在项目中经常用到UITableView中的cell中带有UITextField或UITextView的情况,然后在这种场景下,当我们点击屏幕较下方的cell进行编辑时,这时候键盘弹出来会出现遮挡待 ...

  5. 移动端 fixed 固定按钮在屏幕下方,然后按钮被键盘顶上来...顶上来了有没有~

    在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...

  6. H5 移动端 键盘遮挡焦点元素解决方案

    前言 最近在做 webapp,遇到了很多移动端兼容的问题,其中一个问题就是:输入框触发 focus 后,键盘弹出,然后遮住了输入框. 然后在Android和IOS上,这个问题的表现形式不一样,而原生键 ...

  7. iOS键盘遮挡输入框,输入区域自动上移

    在iOS开发过程当中,遇到关于键盘遮挡输入框的问题,经过网络参考与实践,总结如下: 登录窗口,上下放置两个UITextField,一个用户名,一个密码,放置的在屏幕下方1/3处,当点击用户名时,自动弹 ...

  8. iOS- UITextView与键盘回收与键盘遮挡输入框

    一.UITextView 可以实现多行输入的文本框,基本属性与UITextField相似,可以输入多行,可以滚动.UITextView还有个代理方式- (BOOL)textView:(UITextVi ...

  9. Android WebView中软键盘会遮挡输入框相关问题

    要想实现这样的软键盘出现的时候会自己主动把输入框的布局顶上去的效果,须要设置输入法的属性,有下面两种设置方式:     一.在java代码中设置例如以下:      getWindow().setSo ...

随机推荐

  1. C#学习笔记----枚举、结构、方法及构造函数的总结

    一.枚举 语法: [public] enum 枚举名 { 值1, 值2, 值3, ........ } public:访问修饰符.公开的公共的,哪都可以访问. enum:关键字,声明枚举的关键字 枚举 ...

  2. XidianOJ 1096 数的拆分

    题目描述 输入自然数n,然后将其拆分成由若干数相加的形式,参与加法运算的数可以重复. 输入 多组数据.每组只有一个整数n,表示待拆分的自然数n. n<=80 输出 每组一个数,即所有方案数. - ...

  3. gulp-notify处理报错----gulp系列(二)

    上一节,以less为例,入门了gulp,并为任务结构做了抽离. 前端们,gulp该用起来了,简单的demo入门——gulp系列(一) 本节学习下gulp-notify,官方这样解释的: gulp-no ...

  4. jQuery返回顶部(精简版)

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  5. Linux下使用Mysql

    一.连接MySQL数据库 一个最简单的程序示例: #include <stdio.h> #include "mysql.h" int main() { MYSQL my ...

  6. hdu1010 Tempter of the Bone---DFS+奇偶剪枝

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1010 题目描述:根据地图,'S'为开始位置,'D'为门的位置,' . '为空地,'X'为墙,不能经过 ...

  7. Ubuntu 12.04下安装QQ 2012 Beta3(转)

    Ubuntu 12.04下安装QQ 2012 Beta3   由于wine的发展非常迅速.现在网上的利用老版本的wine来安装QQ2012的教程已经有些过时了.实际上操作起来非常简单: 第一步:Ctr ...

  8. 基于GUI的简单聊天室02

    服务器端 与上一篇相比,加进了线程内部类,解决多个客户端连接时,服务器无法全部响应的问题. 利用List集合来装载客户端的对象. 还需要注意全局变量的应用. /** * 相比01,加进了线程内部类,解 ...

  9. 统计单词出现的最多次数(Trie树)

    A Time Limit: 60ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 给出n(1<= n && n <= 2*10^6) ...

  10. cocos2dx遇到的坑1

    记录下在cocos2dx 2.x时代遇到的问题 1.节点的观念,用节点来管理 2.pushscene popscene 和replacewithscene runwithscene对应 3.lua里释 ...