Trust
Trust
  • 发布:2017-06-30 16:05
  • 更新:2021-03-12 21:29
  • 阅读:11876

【示例】解决软键盘弹出时底部元素上浮的问题

分类:HTML5+

问题描述

在html5plus环境下,当html中存在固定在底部的元素时,此时弹出软键盘的话,底部的元素也会被弹上来。
出现这种情况时,看起来页面布局好像乱掉了,这样给用户的体验不太理想。

问题分析

问题原因

之所以会出现这种情况,是因为软键盘弹出会导致Webview的高度发生变化,进而导致html中元素位置发生变化。
其实也可以认为元素定位没有变,只是元素所在容器的宽高变化,看起来像是元素的位置变了。意思就是,元素定位相关的css并没有错误或者说失效。

验证方法

想验证这个变化,可以通过监听window的resize事件在回调中打印日志即可。

// 监听window的resize  
window.addEventListener('resize', function() {  
    var height = document.documentElement.clientHeight;  
    var width = document.documentElement.clientWidth;  
    console.log('可见区域高度:' + height);  
    console.log('可见区域宽度:' + width);  
});

当然,通过chrome调试Webview的功能,在chrome中可以很清楚地看到Webview的高度变化。

简单来说

软键盘被唤起的时候,原本属于Webview的空间被软键盘占用了(是占用,不是覆盖或者遮盖)。屏幕一共就那么高,软键盘把Webview的空间占用了一部分,那么Webview自然就被挤压,高度也就变了。

解决办法

固定元素

元素之所以会上浮,是因为通常我们都是设置元素的bottom值使其固定在底部。

.bottom {  
    height: 40px;  
    position: fixed;  
    bottom: 0;  
}

但是Webview被挤压后,底部的位置上去了。元素是基于bottom值进行定位,那么它看起来就是在软键盘的上面。

逆向固定

既然bottom值会使元素上浮,但是我们又希望元素固定在底部。此时,可以使用逆向的方式,也就是设置top值让元素固定在顶部。

var bottomEl = document.querySelector('.bottom');  
// 可见区域高度减去元素的高度  
bottomEl.style.top = document.documentElement.clientHeight - 40 + 'px';

由于是基于top值定位,Webview被向上挤压,顶部的位置是不变的,那么元素的位置自然就不会发生变化。

效果图及源码

改进后的效果如下

示例代码见附件,下载后真机运行即可。

其它办法

如果各位有其它更好的解决办法,欢迎指教,并在社区分享你宝贵的经验。

23 关注 分享
nearwmy@gmail.com 杨婆婆管家家 lhyh 小小刀 菜鸡 老关 老哥教教我 水灵退散 zhaokui525@163.com xiao127 Yaphets 582366190@qq.com 梦如人生 yydm79687@qq.com skysowe 786039294@qq.com yetsung@163.com 谜之月神工匠 Chin Sug 1329586761@qq.com 五毛记忆 qw5558912@126.com

要回复文章请先登录注册

80137509@qq.com

80137509@qq.com

做个记号
2021-03-12 21:29
小菜啊

小菜啊

在manifest.json找到app-plus下添加"softinput" : {"mode" : "adjustPan"},注意只有在打包好的app上才有效果,可以解决软键盘顶页面布局的问题
2021-01-22 17:41
qw5558912@126.com

qw5558912@126.com

可以可以,试下这种做法
2020-10-13 09:47
1782604630@qq.com

1782604630@qq.com

换个思维说应该是在弹出键盘后隐藏底部元素,键盘收缩时正常显示底部元素。
2020-04-28 11:25
398927951@qq.com

398927951@qq.com

很棒
2019-12-28 12:02
582366190@qq.com

582366190@qq.com

可以可以
2017-08-25 10:42
所谓

所谓

回复 Yaphets :
window.onresize = function() 这样写
2017-08-21 16:12
Yaphets

Yaphets

IOS监听不到resize事件怎么办
2017-07-31 17:39
Trust

Trust (作者)

回复 xiao127 :
多谢指教,关键词已经补充。
2017-07-25 10:48
xiao127

xiao127

楼主,你这排版和关键词不太好,你的解决办法下面写:“固定元素”和“逆向固定”,其实解决办法也就是逆向固定而已,而且你这个还有bug,因为你没监听当屏幕发生改变时的情况,如屏幕翻转时,底部栏就不准了,所以逆向固定底部栏应绑定在屏幕大小发生改变的事件中:
window.addEventListener('resize',function(){
bottomEl.style.top = document.documentElement.clientHeight - 40 + 'px';
});
再来说说您设置的搜索关键词,都没有 “输入法”、“底部栏”、“弹起” 等大多数人首先想到的关键词,反而设置什么“HTML5+”,那碰到问题的人,怎么能容易的找到你这篇文章呢?我也是找了好久才看到您的这篇文章的。
不过,还是非常感谢您的解答!
2017-07-25 09:31