移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分


1、 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方

(function bottonm(){
			if($(document).height()<$(window).height()){
				$('.bottom_fix').css({'position':'fixed','bottom':'0px'});
				$(document).height($(window).height()+'px');
			}
		})();

2、解决输入框input获取焦点得时,虚拟键盘会把fixed元素顶上去(次现在在部分安卓上能发现)如下图


$('#phone').bind('focus',function(){
			$('.bottom_fix').css('position','static');
			//或者$('#viewport').height($(window).height()+'px');
		}).bind('blur',function(){
			$('.bottom_fix').css({'position':'fixed','bottom':'0'});
			//或者$('#viewport').height('auto');
		});
参考:http://www.cnblogs.com/yexiaochai/p/3561939.html

3、解决屏幕旋转也会出现以上问题

$(document).bind('orientationchange',function(){
			if(window.orientation==90 || window.orientation==-90){
				$('.bottom_fix').css('position','static');
			}else{
				$('.bottom_fix').css({'position':'fixed','bottom':'0'});
			}
		});


### JavaScript监听软键盘弹出与收起高度变化 在移动端开发中,软键盘弹出收起会对页面布局造成显著的影响,尤其是当页面中有 `position: fixed` 定位的元素时。针对这一问题,在 Android iOS 平台上存在不同的解决方案。 #### Android平台上的实现方法 对于 Android 设备而言,可以通过监听窗口大小的变化来检测软键盘的状态。具体来说,软键盘的显示或隐藏会引起浏览器视口(viewport)尺寸的变化,从而触发 `resize` 事件[^2]: ```javascript window.addEventListener('resize', function() { const windowHeight = window.innerHeight; // 判断当前是否有软键盘弹出 if (windowHeight < initialWindowHeight) { // 假设initialWindowHeight为初始窗口高度 console.log('Soft keyboard is shown'); } else { console.log('Soft keyboard is hidden'); } }); ``` 上述代码通过比较当前窗口高度 (`window.innerHeight`) 原始窗口高度 (`initialWindowHeight`) 来判断软键盘是否处于可见状态。需要注意的是,此方案仅适用于支持 `resize` 事件的设备环境。 #### iOS平台上的替代策略 iOS 不会因软键盘的展示而调整窗口的高度,因此无法依赖于 `resize` 事件进行监测[^1]。然而,开发者仍然能够借助其他技术手段间接获取到输入框聚焦或者失去焦点的信息作为补充依据之一: ```javascript document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' // 此表达式用于确认当前活动元素是否属于可编辑控件类别。 ``` 另外一种常用方式则是观察特定 HTML 元素相对于文档顶部位置偏移量的变化情况, 这种现象通常伴随着虚拟键盘显现发生. ```javascript const inputFieldOffsetTopBeforeKeyboardShow = someInput.offsetTop; someInput.focus(); setTimeout(() => { const currentInputFieldPositionAfterFocusAttempted = someInput.getBoundingClientRect().top + window.scrollY; if(Math.abs(currentInputFieldPositionAfterFocusAttempted - inputFieldOffsetTopBeforeKeyboardShow ) > thresholdValue){ console.log("Keyboard likely showed up."); } }, delayMilliseconds); ``` 以上脚本片段展示了如何利用定时器配合 DOM 节点几何属性计算推测键盘行为逻辑思路[^3]. ### 注意事项 尽管这些技巧可以帮助我们更好地理解并响应移动设备上用户交互过程中的细节差异,但在实际项目应用前还需充分考虑跨厂商兼容性性能开销等因素影响最终效果表现。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值