IOS弹出系统键盘后,页面不恢复

本文详细介绍了在iOS设备上,当键盘弹出时页面自动滚动的问题,并提供了一个JavaScript解决方案,确保页面在键盘隐藏后能正确恢复原位置,特别针对fixed和absolute定位元素的点击事件偏移问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ios中,键盘的弹起,页面会往上挪动,使输入框展示在页面中间,键盘隐藏页面会下挪恢复原状

在6.7.4版本中,不会回挪,这将导致有相对定位(fixed,absolute:相对于浏览器窗体)的节点发生位移,导致节点点击事件偏移而无法选中

解决方案:输入框失去焦点(即键盘隐藏时),手动调整页面,

document.activeElement.scrollIntoViewIfNeeded(true)

在每个输入框失去焦点时,响应以下事件即可

在页面插入下面代码就可以了:

<script>
	var u = navigator.userAgent, app = navigator.appVersion
	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	$(document).ready(function(){
		$("input").blur(function(){
			if (isIOS) {
				blurAdjust()
				// alert("1231321233")
			}
		});
	});
	// 解决苹果不回弹页面
	function blurAdjust(e){
		setTimeout(()=>{
			// alert("1231321233")
			if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
				return
			}
			let result = 'pc';
			if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
					result = 'ios'
			}else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
					result = 'android'
			}
			
			if( result = 'ios' ){
				document.activeElement.scrollIntoViewIfNeeded(true);
			}
		},100)
	}
</script>
### iOS 设备上键盘弹出页面整体上移的解决方案 对于iOS设备上的应用或网页,在输入框获取焦点,软键盘弹出会引发页面布局的变化。具体表现为页面内容自动上移以确保输入框保持可见[^3]。 #### 使用 JavaScript 动态调整页面高度 一种常见的方法是在检测到键盘即将显示之前通过JavaScript监听`focusin`事件来动态增加页面底部内边距(padding-bottom),使页面提前预留足够的空间给键盘占用。当失去焦点即触发`focusout`事件后,则将该属性重置为初始状态: ```javascript document.addEventListener('focusin', function(event){ if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') { document.body.style.paddingBottom = "260px"; // 根据实际情况设置合适的像素值 } }); document.addEventListener('focusout', function(){ document.body.style.paddingBottom = ""; }); ``` 这种方法能够有效防止由于键盘突然出现而导致的内容跳动问题,并且可以在键盘消失之后立即恢复正常视图[^1]。 #### CSS Flexbox 布局技巧 另一种方式是利用CSS中的Flexbox特性构建响应式的容器结构。将整个页面设计成一个垂直方向排列的弹性盒子模型,其中包含两个子元素——主要内容区和占位符div。正常情况下,后者占据零高度;而一旦监测到键盘开启信号,则赋予其固定的高度等于预计键盘尺寸大小,从而间接推动上面的部分上升而影响实际DOM树层次关系: ```css html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; } .main-content { flex-grow: 1; overflow-y: auto; } .placeholder-for-keyboard { transition: all .3s ease-in-out; min-height: 0; } /* 当需要适应键盘 */ .keyboard-opened .placeholder-for-keyboard{ min-height: 260px !important; /* 同样根据需求调整 */ } ``` 此策略仅适用于简单的表单场景,还特别适合处理复杂多变的应用界面,因为它允许开发者更加灵活地控制同状态下各个部分之间的相对位置变化[^5]。 #### UniApp框架下的特殊处理 如果项目基于Vue.js开发并采用UniApp作为跨平台工具链的话,还可以考虑借助于官方提供的API接口实现更优雅的效果。例如,可以通过监听页面生命周期钩子函数`onKeyboardHeightChange()`来自定义逻辑应对键盘高度变动情况: ```javascript export default { data() { return { keyboardHeight: 0, }; }, methods: { handleKeyboardChange(e) { this.keyboardHeight = e.detail.height; // 更新样式或其他交互行为... }, }, onLoad() { uni.onKeyboardHeightChange(this.handleKeyboardChange); }, }; ``` 上述代码片段展示了如何注册回调监听器用于实跟踪当前屏幕可用区域的实际尺寸改变趋势,进而采取适当措施优化用户体验[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值