移动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输入框唤 ...
随机推荐
- python操作RabbitMQ、Redis、Memcache、SQLAlchemy
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- [Swift实际操作]九、完整实例-(4)在项目中使用CocoaPod管理类库和插件
本文将为你演示,如何使用CocoaPod第三方类库管理工具,在项目中安装未来需要使用的类库.首先创建一份文本文件.可以使用一个脚本创建文件,你可以采用自己的方式是创建一份文本文件,接着在文件名称上点击 ...
- 【算法】关于图论中的最小生成树(Minimum Spanning Tree)详解
本节纲要 什么是图(network) 什么是最小生成树 (minimum spanning tree) 最小生成树的算法 什么是图(network)? 这里的图当然不是我们日常说的图片或者地图.通常情 ...
- SDUT OJ 数据结构实验之二叉树二:遍历二叉树
数据结构实验之二叉树二:遍历二叉树 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...
- c++11中关于`std::thread`线程传参的思考
关于std::thread线程传参的思考 最重要要记住的一点是:参数要拷贝到线程独立内存中,不管是普通类型.还是引用类型. 对于传递参数是引用类型,需要注意: 1.当指向动态变量的指针(char *) ...
- C# 根据列名获取列值
/// <summary> /// 根据列名获取列值 /// </summary> /// <param name="colName">< ...
- python xlwt 与 xlsxwriter 模块差别
Xlwt 模块有一个bug, 就是所用样式过多的话,之后的数据将使用不了样式,相反xlsxwriter 模块 不会有此问题. 用Xlwt模块的同学们,请务必转换用xlsxwriter模块 !!!!!! ...
- HTML 5 桌面提醒
<script> function showNotice(title,msg){ var Notification = window.Notification || window.mozN ...
- Python之逻辑运算符
这一小节我在动笔之前犹豫到底要不要动手写,虽然简单但是防止遗忘,博主还是决定记录一下.Python中运算符主要分为算术运算符,赋值运算符,比较运算符,逻辑运算符以及成员运算符.下面详细记录这5种运算符 ...
- P3813 [FJOI2017]矩阵填数
传送门 矩阵很大,但是发现 $n$ 很小,从这边考虑,对于一个一堆小矩阵放在一起的情况 考虑把每一块单独考虑然后方案再乘起来 但是这些奇怪的东西很不好考虑 所以暴力一点,直接拆成一个个小块 但是这样我 ...