解决安卓的input的弹出的软键盘遮住文本

来源：互联网发布：老板烟机淘宝和实体店编辑：程序博客网时间：2024/05/29 03:03

ios的软键盘弹出会把整个文本区域抵上来，但是安卓会覆盖部分的文本，很不友好的
先上效果图：
安卓：
这里写图片描述

实现的方法就是display：flex的实现，如果有表单，千万不要使用的position的方法，这样安卓肯定会挂掉。

形式一：外部一个container 里面有个content，但是content是绝对居中的，第一反应是position，但是有表单的话，就要放弃这种方法。

注：有表单就该使用 flex的方法

.container {    display: flex;    align-items: center;    justify-content: center;}.content {    width:100px;    height:100px;}

形式二：

 <article id="h5applyvip">    <header class="header"></header>    <div class="content">      <form class="form">        <input type="text" class="input" name="name" v-model.trim = "formData.name">        <input type="text" class="input" name="name" v-model.trim = "formData.name" >        <input type="text" class="input" name="name" v-model.trim = "formData.name" >        <input type="text" class="input" name="name" v-model.trim = "formData.name" >      </form>    </div>    <footer class="footer"  @click="openClick(formData)">   <!--立即开通-->      <img src="./images/open-btn@2x.png" alt="" class="open-btn">    </footer>  </article>

 #h5applyvip {    width: 100%;    min-height: 100vh;   //撑满整个屏幕    display: flex;        flex-direction: column;  //竖向排列    .header {      width: 7.5rem;        height: 3.1rem;  //头部的定死高度    }     .content {      flex: 1;    //content是撑满      width: 100%;    }    .footer {      height: 1.1rem;  //脚部的定死高度      width:100%;    }  }

上面的这种方法可以实现另外一中的效果（sticky footer）

参考资料：
http://caniuse.com/#search=flex-direction”
http://www.runoob.com/w3cnote/flex-grammar.html

阅读全文

0 0