uni-app使用uView打开弹出层后输入框聚焦时placeholder错位问题

这里就不放效果了,大概意思就是在使用uView的popus时,在底部弹出后,如果弹窗中的输入框会造成一瞬间的placeholder文字错位,这个问题的主要是因为uView安全区适配导致

uView相关文档

python 复制代码
https://www.uviewui.com/components/safeAreaInset.html

popus源码

它会自动判断在并且在IPhone X等机型的时候,给元素加上一个适当底部内边距,从而为了防止用户点击相关按钮时候误触。就像这样:

可以在真机测试的时候通过真机控制台删除安全距离生成元素,就会发现已经没有了之前的placeholder错位问题

解决方案:
popup组件中动态绑定safeAreaInsetBottom的值,在每次键盘高度变化的时候取反,并且在每次键盘失去焦点的时候恢复底部安全距离,从而实现页面上推,键盘弹出时候,因为安全距离而导致的placeholder错位问题

html 复制代码
<u-popup :show="show" @open="popupOpen" :safeAreaInsetBottom="safeArea">
js 复制代码
data() {
	return {
		safeArea: true
	}
},
js 复制代码
// 键盘高度变化事件(解决iphoneX底部安全距离导致的placeholder错位问题)
keyboardheightchange() {
	this.safeArea = !this.safeArea
},
// 输入框失焦
inputBlur() {
	this.safeArea = true
},
相关推荐
技术小丁8 分钟前
uni-app 广告弹窗最佳实践:不扰民、可控制频次、含完整源码
前端·uni-app·1024程序员节
quan26319 分钟前
日常开发20251022,传统HTML表格实现图片+视频+预览
前端·javascript·html·html列表实现图片+视频
陶甜也35 分钟前
ThreeJS曲线动画:打造炫酷3D路径运动
前端·vue·threejs
楊无好39 分钟前
react中的受控组件与非受控组件
前端·react.js
菠萝+冰41 分钟前
react虚拟滚动
前端·javascript·react.js
落一落,掉一掉1 小时前
第十三周前端加密绕过
前端
高德开放平台2 小时前
实战案例|借助高德开放平台实现智慧位置服务:路线导航的开发与实践
前端·后端
老前端的功夫2 小时前
# HTTP缓存:从懵懵懂懂到了如指掌
前端
安卓开发者2 小时前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker
Dorian_Ov02 小时前
GeoPandas+DataFrame实现shapefile文件导入PostGIS数据库
前端·gis