android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起

在做一个基于企业微信的h5移动页面时，当软键盘弹出时，底部fixed定位在ios上没事，安卓手机上，底部按钮会被顶起到软键盘，查看原应时由于软键盘顶起时，安卓设备的视图会变小。造成固定定位按钮呗顶起。多方查询，并且自己用过后，觉得下面两种方式各有利弊。闲话不说了，看代码吧

一、显示隐藏处理

这种处理有点局限性，不关闭软键盘，底部按钮不会显示出来。好处是不会卡顿。

data () {

return {

screenHeight: document.body.clientHeight, // 这里是给到了一个默认值

originHeight: document.body.clientHeight, // 默认高度在watch里拿来做比较

isOriginHei :true, // 这个属性是固定定位按钮的显隐开关

mounted () {

//处理软键盘弹出底部固定定位按钮顶起问题

let self = this

window.onresize = () => {

return (() => {

self.screenHeight= document.body.clientHeight

})()

}

watch: {

screenHeight (val) {

// 判断软键盘弹出，收起

if(this.originHeight-val > 50) {

// 键盘弹出

this.isOriginHei = false

}else{

// 键盘收起

this.isOriginHei = true

}

最好在离开页面后注销掉

beforeDestroy () {

window.onresize = null; //注销window.onresize事件

二、使用jq处理

这种处理方法解决了第一种的问题，但是会有点卡顿。

直接在页面的js内加入如下代码。

键盘弹出时，将固定去掉。键盘收起时，加入固定定位。

// 解决安卓软键盘弹出底部按钮顶起

var winHeight = $(window).height(); //获取当前页面高度

$(window).resize(function () {

var thisHeight = $(this).height();

if ( winHeight - thisHeight > 140 ) {

//键盘弹出

$('.btn').css('position','static');

} else {

//键盘收起

$('.btn').css({'position':'fixed','bottom':'0'});

}

})

解决。欢迎留言交流

android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起相关推荐

android开发 Activity包含Fragment切换背景黑色闪屏解决方案
最近项目主页是用activity包含4个fragment组成的,然而我发现主页面的fragment切换有黑色的背景闪现,效果如下: 看了很多同道的解决方案,也没什么效果,后来我设置了一下背景,我的应该 ...
vue App 端防止页面键盘弹起页面不下来
<input type="number" placeholder="请输入邮箱验证码" v-model="emailcodes" @b ...
vue弹出层滑动禁止背景跟着滑动_vue移动端弹起蒙层滑动禁止底部滑动操作
解决办法在蒙层弹起的时候将body设置为fixed定位在蒙层消失的时候将body恢复原位 popupVisible(newValue) { if (newValue) { document.bod ...
摇杆怎么映射到键盘_[评测]YAMAHA PSRSX900：雅马哈升级幅度最大的高端编曲键盘键盘中国原创评测...
本文图片均由本人亲自拍摄,转载请注明出处.年前就收到这台国行PSR-SX900了.在这一个月特殊的日子里,不能出门,幸好有sx900的陪伴,让我可以天天弹琴.唱歌打发时间...现在很多地方开始逐渐复工 ...
vue 管理后台使用虚拟键盘组件支持中英文切换
前言:在大型触屏设备(如双屏设备)中,就没有键盘去操作,而且在触屏input或者textarea的输入时候就无法去输入值,没办法触发输入框enter事件,所以就需要去建立一个虚拟键盘去操作就想着找一 ...
android软键盘自动弹出,android安卓editText自动弹出软键盘（输入键盘）
editext获取焦点并自动弹出输入键盘,代码如下: EditText editText.setFocusable(true); editText.setFocusableInTouchMode(t ...
安卓手机键盘弹出导致h5页面错乱
安卓手机键盘弹出导致h5页面错乱特别是有表单的h5,点击input输入信息的时候提交的按钮.以及定位到下方的图片都会被挤上来. 解决方法如下: <div class="bg_img& ...
html 软键盘页面高度,深入理解高度，获取屏幕、webview、软键盘高度
如果没有手动调整过webview的高度的话,默认情况下,屏幕的高度=顶部状态栏的高度+webview的高度. 如果软键盘打开,则屏幕的高度=顶部状态栏的高度+webview的高度+软键盘的高度. HT ...
android app底部菜单栏,材料设计指南·组件篇（一）：AppBars: Bottom 底部栏
写在前面的话:内容来自 Material IO ,目前不是从头到尾一一翻译,我自己用到哪部分内容就翻译哪部分.之后会逐步完善,当然你要想先看哪部分也可以留言提要求.不是直译,但不会影响原文内容. 材料 ...

android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起

android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起相关推荐

最新文章

热门文章