最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示:

正常页面显示

 IOS端显示情况

Android端显示情况

解决方式:

<template>
<div class="change-phone-box">
<img class="phone-img" :src="'img/change_telephone@2x.png' | assets" alt="修改手机号">
<p class="tip">您当前的手机号为&nbsp;<span>{{ phoneNum }}</span><br>更改后可用新手机号</p>
</div>
<div v-el:keyboard>
<div class="m-register-pannel">
<div class="m-form-item v-table">
<span class="m-form-label v-cell"><i class="icon icon-phoneNum"></i></span>
<span class="m-form-content v-cell">
<input type="tel" placeholder="输入手机号" v-model="mobile" @focus="keyboardBounce(false)"
@blur="keyboardBounce(true)" @keyup="changeStyle($event)" maxlength="11"/>
</span>
</div>
<div class="m-form-item v-table">
<span class="m-form-label v-cell"><i class="icon icon-messageCode"></i></span>
<span class="m-form-content v-cell">
<input type="tel" placeholder="短信验证码" v-model="verifyCode" @focus="keyboardBounce(false)"
@blur="keyboardBounce(true)" maxlength="6"/>
</span>
<span class="fr get-message-code" @click="msgCode()"
:style="{'background-color': (canGetMsgCode?'#00cc99':'#c4cdd4') }">
{{msgCodeBtnText?msgCodeBtnText:'获取验证码'}}
</span>
</div>
</div>
<div class="m-form-action">
<button full @click="changePhoneSubmit()">确&nbsp;认</button>
</div>
</div>
</template> <script type="text/babel"> import Config from '../app.config' export default {
data () {
return {}
},
vuex: {
getters: {},
actions: {}
},
methods: {
keyboardBounce(isClose){
if (Config.isAndroid) {
var keyboard = this.$els.keyboard;
var timer = setInterval(function () {
keyboard.scrollIntoView(false);
if (isClose) {
clearInterval(timer);
}
}, 200);
}
},
}
}
</script> </body>
</html>

参考链接: Element.scrollIntoView()

移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法的更多相关文章

  1. input获取焦点弹出系统虚拟键盘时,挡住input解决方法

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内. <input type="tel" placeholder="输入 ...

  2. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  3. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  4. android 弹出的软键盘遮挡住EditText文本框的解决方案

    1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...

  5. 手机端input获取焦点弹出键盘时挡住input解决方案

    问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...

  6. Android虚拟键盘弹出时挡住EditText解决方法

    在manifest的activity节点使用 Xml代码   <activity android:windowSoftInputMode="adjustResize"/> ...

  7. Android 手机卫士11--窗体弹出PopupWindow

    protected void showPopupWindow(View view) { View popupView = View.inflate(this, R.layout.popupwindow ...

  8. Android 禁止Edittext弹出系统软键盘 的几种方法

    第一种方法:在XML文件下添加: android:focusable="true" android:focusableInTouchMode="true" 第二 ...

  9. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

随机推荐

  1. map/fileter

    一.生成器,generator,节省内存,但是增加了CPU的计算时间 (下节课讲函数怎么变成生成器) 每次循环的时候,就按照这个规则(自己定义的逻辑)去生成一个数据. res = [ 'a','1' ...

  2. 返回类型和 return 语句

    return 语句终止当前正在执行的函数并将控制权返回到调用该函数的地方.return 语句有两种形式: return; return expression; 不要返回局部对象的引用或指针: 函数完成 ...

  3. 深度学习之 TensorFlow(五):mnist 的 Alexnet 实现

    尝试用 Alexnet 来构建一个网络模型,并使用 mnist 数据查看训练结果. 我们将代码实现分为三个过程,加载数据.定义网络模型.训练数据和评估模型. 实现代码如下: #-*- coding:u ...

  4. loj #2305. 「NOI2017」游戏

    #2305. 「NOI2017」游戏 题目描述 小 L 计划进行 nnn 场游戏,每场游戏使用一张地图,小 L 会选择一辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 AAA.BBB. ...

  5. 洛谷 P2677 超级书架 2 题解

    传送门 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有N(1 <= ...

  6. php tp5常用小知识

    1. tp5 获取当前访问的模块名,控制器名,方法名 $request= \think\Request::instance(); $module = $request->module(); // ...

  7. javaweb面试一

    1.forward与redirect区别,说一下你知道的状态码,redirect的状态码是多少? 状态码 说明 200 客户端请求成功 302 请求重定向,也是临时跳转,跳转的地址通过Location ...

  8. 启动storm集群及配置

    在nimbus nohup bin/storm nimbus >> /dev/null & 在supervisor分别执行 nohup bin/storm supervisor & ...

  9. 条目十四《使用reserve来避免不必要的重新分配》

    条目十四<使用reserve来避免不必要的重新分配> 使用vector和string的插入元素的时候,我们是不用担心内存问题的(只要不超过容器的max_size).因为底层有分配子管理内存 ...

  10. [USACO10MAR]伟大的奶牛聚集 BZOJ 1827 树形dp+dfs

    题目描述 Bessie is planning the annual Great Cow Gathering for cows all across the country and, of cours ...