最近在写移动端页面的时候,遇到一个问题,在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. 数据解析之xpath

    一.环境安装 下载lxml pip install lxml 二.使用 XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取 ...

  2. java集合之Set接口

    Set集合通常不能记住元素添加的顺序,其他的操作和它的父接口基本相同.只是行为上有细微的差别,Set集合不能包含相同的元素.如果尝试添加相同的元素,调用add()方法将返回false,且新元素不能被加 ...

  3. SQLServer如何清除缓存?

    --1. 将当前数据库的全部脏页写入磁盘.“脏页”是已输入缓存区高速缓存且已修改但尚未写入磁盘的数据页. -- CHECKPOINT 可创建一个检查点,在该点保证全部脏页都已写入磁盘,从而在以后的恢复 ...

  4. audio.play dom对象 JQ不支持play

    */        PausePlayVoice:function() {            $("#spPauseAudio").click(function() {     ...

  5. Qt 学习之路 2(49):自定义只读模型

    Qt 学习之路 2(49):自定义只读模型 豆子 2013年5月5日 Qt 学习之路 2 18条评论 model/view 模型将数据与视图分割开来,也就是说,我们可以为不同的视图,QListView ...

  6. Little Elephant and Magic Square

    Little Elephant loves magic squares very much. A magic square is a 3 × 3 table, each cell contains s ...

  7. C++_友元3-其他友元关系

    友元和类的关系还可以更复杂. 举个例子,假设出现了交互式遥控器,交互式遥控器能够让您回答电视节目中的问题,如果回答错误,电视将在控制器上产生嗡嗡声. 这个例子的问题,可以使用新的友元关系来解决.我把它 ...

  8. [原创]c# 类中 Collection 字段初始化的特殊之处

    1.今天看一下StackExchange.Redis的源代码,里面有这样一段代码 public sealed class ConfigurationOptions : ICloneable { ... ...

  9. Filezilla 错误

    一般来说,只要网站能访问,FTP就应该能连接的,之前好长一段时间一直遇到连接不上香港主机的问题,还以为是宽带出口线路不好,原来是自己学识浅薄,在同事的指点下才明白所以然,下面总结一下FTP连接中的常见 ...

  10. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...