最近在写移动端页面的时候,遇到一个问题,在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. linux命令笔记,零散记录<不完整,学习用>

    uname -a 输出系统架构 cp 源文件 目标文件 mv同理 tar –xvf file.tar // 解压 tar包 tar -zxvf file.tar.gz // 解压tar.gz tar ...

  2. Kubernetes -- Server 部署

    1.  Node 节点配置文件 1.1 下载相关的软件 wget https://dl.k8s.io/v1.13.1/kubernetes-server-linux-amd64.tar.gz wget ...

  3. [Swift实际操作]九、完整实例-(1)在iTunesConnect网站中创建产品

    本文将通过一个实例项目,演示移动应用开发的所有步骤.首先要做的是打开浏览器,并进入[iTunesConnect网站],需要通过它创建一款自己的应用. 在iTunesConnect的登录页面中,输入自己 ...

  4. centos7用docker安装elasticsearch5.6.13的主从

    说明: 准备2台机器,我这里有192.168.0.170 和 192.168.0.169 192.168.0.170 作为master 192.168.0.169 作为普通node 一.环境1.doc ...

  5. SpringMVC中web.xml的配置(直接coppy使用就行)

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  6. Shell脚本——初识

    1.在一般情况下,人们并不区分 Bourne Shell 和 Bourne Again Shell,所以,像 #!/bin/sh,它同样也可以改为 #!/bin/bash. #! 告诉系统其后路径所指 ...

  7. linux opencv版本查询

    查看opencv安装路径: sudo find / -iname "*opencv*" 查看opencv版本: pkg-config opencv --modversion 查看o ...

  8. 启动Tomcat报错

    如果发现引入jar包有问题时,看jar包是否损坏,变成了0kb.如果是这样,在网上试尽解决办法也是有问题的. 一般Tomcat启动报错,要引入这两个jar包.

  9. Java过滤器详细文档,简介,实例,应用

    简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ...

  10. 004 Android XML文件常用五大页面布局方式

    1.线性布局(LinearLayout)最常用 <1>使用线性布局,首先在xml文件中修改布局为LinearLayout 修改完成后,可在Component Tree中看见如下内容: &l ...