Trust
Trust
  • 发布:2017-06-30 16:05
  • 更新:2023-06-05 15:58
  • 阅读:15113

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

分类: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被向上挤压,顶部的位置是不变的,那么元素的位置自然就不会发生变化。

效果图及源码

改进后的效果如下

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

其它办法

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

24 关注 分享
n***@gmail.com 杨婆婆管家家 lhyh 小小刀 菜鸡 老关 老哥教教我 水灵退散 zhaokui xiao127 Yaphets 谷哼哼 梦如人生 y***@qq.com skysowe 7***@qq.com y***@163.com 谜之月神工匠 Chin Sug 1***@qq.com 五毛记忆 q***@126.com m***@suiyongsuiqi.com

要回复文章请先登录注册

m***@suiyongsuiqi.com

m***@suiyongsuiqi.com

太棒了,看了很多方法甚至還有官方的解答,H5端只有你這個回答有用,非常感謝!
2023-06-05 15:58
8***@qq.com

8***@qq.com

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

小菜啊

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

q***@126.com

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

1***@qq.com

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

握瑾怀瑜

很棒
2019-12-28 12:02
谷哼哼

谷哼哼

可以可以
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