移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法
最近在写移动端页面的时候,遇到一个问题,在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">您当前的手机号为 <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()">确 认</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解决方法的更多相关文章
- input获取焦点弹出系统虚拟键盘时,挡住input解决方法
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内. <input type="tel" placeholder="输入 ...
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
- android 弹出的软键盘遮挡住EditText文本框的解决方案
1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...
- 手机端input获取焦点弹出键盘时挡住input解决方案
问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...
- Android虚拟键盘弹出时挡住EditText解决方法
在manifest的activity节点使用 Xml代码 <activity android:windowSoftInputMode="adjustResize"/> ...
- Android 手机卫士11--窗体弹出PopupWindow
protected void showPopupWindow(View view) { View popupView = View.inflate(this, R.layout.popupwindow ...
- Android 禁止Edittext弹出系统软键盘 的几种方法
第一种方法:在XML文件下添加: android:focusable="true" android:focusableInTouchMode="true" 第二 ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
随机推荐
- centos 在vm下网络不通
VMware是一款虚拟机,支持各种热门系统,我们可以在VMware虚拟机中安装其他系统以满足个人需求,但在为VMware安装CentOS6.5后,无法连接网络,这是什么原因导致的呢?下面就给大家介绍下 ...
- 3-19bug随即
#方案录入 ### 国外网络访问,录入添加图片,上传后图片显示不出. ``` * 后台有返回数据,前端显示巨慢,待检查 * ``` ### 产品信息,富文本信息加载不出
- ThinkPHP U方法
方法1: {:U('User/Booking/bookingdetails')} 方法2: {:U('User/Booking/bookingdetails')}"+"&a ...
- centos虚拟机设置静态ip
1.虚拟机网络配置设置为桥接模式 2.设置配置文件: vi /etc/sysconfig/network-scripts/ifcfg-ens33 DEVICE=ens33 HWADDR=:0c::c3 ...
- K3 Wise 常用表【转载】
在后台数据库ICClassType表中,字段FID<0的是老单,FID>0的是新单.--事务类型select * from ICClassType where FT ...
- CoreML的学习
在苹果官网下载模型model 链接: https://developer.apple.com/machine-learning/
- Java ExecutorService 四种线程池
1.new Thread的弊端 new Thead(new Runnable(){ @Override public void run() { // TODO Auto-generated metho ...
- springboot整合mybatis,redis,代码(二)
一 说明: springboot整合mybatis,redis,代码(一) 这个开发代码的复制粘贴,可以让一些初学者直接拿过去使用,且没有什么bug 二 对上篇的说明 可以查看上图中文件: 整个工程包 ...
- MAC office2016 安装及激活(试了一下,靠谱, 非常感谢原作者)
转载地址:https://blog.csdn.net/jxq0816/article/details/77248462 非常感谢原作者. 一.安装包下载地址 http://officecdn.micr ...
- linux的目录和基本的操作命令
目录相关操作:( ctrl+l 清空当前的屏幕中的命令 ) 一:目录说明: . 当前目录.. 上一层目录- 前一个工作目录~ 当前[用户]所在的家目录 蓝色的文件: 都是目录 白 ...