uniapp 苹果手机input,textarea聚焦后页面被上推,失去焦点后未还原问题

本文介绍了解决iOS设备上使用position:fixed的弹窗组件中input和textarea聚焦导致页面偏移的问题。通过监听元素失焦事件并结合页面滚动位置记录,实现了聚焦前后页面位置的平滑过渡。

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

应用场景:

自定义封装了一个弹层,使用position:fixed,弹层内有input和textarea,这种组合会导致在苹果手机上出现一个问题:

问题描述:

当input和textarea获取焦点后,整个页面会被上推一段距离,输入完成后,在失去焦点的时候,页面未被还原,导致弹层实际可操作区域与显示区域错位,错位的上下距离就是页面被上推的距离;

解决办法: 

先给input、textarea绑定blur方法:

<textarea @blur="_ipt_blur"/>
<input @blur="_ipt_blur"/>

再在页面methods内添加自定义方法_ipt_blur,问题解决

_ipt_blur(){
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 0
	});
},

那么新的问题来了,如果原先页面有滚动条,而且页面已经滑了一段距离,当失去焦点时,上诉操作会将页面置顶,这无疑用户体验不好,所以需要处理下;

在页面的生命周期函数同级新增监听页面滚动函数,并记录下页面滚动的距离scrollTopPX 

onShow() {
	
},
//监听滚动条滚动的距离
onPageScroll(res){
	this.scrollTopPX = res.scrollTop;
},

在_ipt_blur内将scrollTopPX 赋值给scrollTop,问题解决;

methods: {
    _ipt_blur(){
	    uni.pageScrollTo({
		    scrollTop: this.scrollTopPX,
		    duration: 0
	    });
    },
}

无意中发现的问题:

处理问题途中还碰到了另外一个问题:input输入框在输入文字时不能实时显示,只有当失去焦点后才会显示,而且删除文字时,,比如删除2个文字,光标左移了两位,但输入框显示的还是未删除的文本,也是只有当失去焦点后才显示正确;

刻意中发现的解决办法:

给input添加如下样式(这里感谢这位前辈了,我是前辈o(* ̄︶ ̄*)o):

-webkit-transform: translate3d(0, 0, 0);

 

 

### uniapptextarea 失去焦点的解决方案 在处理 `uniapp` 的 `textarea` 组件时,有时会遇到失去焦点问题。为了确保用户体验流畅并能正常编辑文本,可以采用以下几种方法来解决问题。 #### 方法一:通过 JavaScript 手动设置焦点 可以通过编程方式手动触发 `textarea` 获取焦点。当页面加载完成或特定事件发生后,调用 `focus()` 函数使输入框获得焦点[^1]: ```javascript // 假设这是绑定到 textarea 上的方法 methods: { setFocus() { this.$nextTick(() => { const input = document.querySelector('textarea'); if (input) { input.focus(); } }); } } ``` #### 方法二:利用 v-model 和 watch 实现重新聚焦 如果是因为数据变化导致了失焦现象,则可以在监听器中再次尝试让其获取焦点。使用 Vue.js 提供的数据双向绑定机制 (`v-model`) 结合观察者模式(`watch`) 来实现这一功能[^2]: ```vue <template> <view> <!-- 将 value 双向绑定了 --> <textarea :value="textValue" @blur="handleBlur"></textarea> </view> </template> <script> export default { data(){ return{ textValue:'' }; }, methods:{ handleBlur(event){ setTimeout(()=>{ event.target.select(); // 或者使用 focus() },0); } } }; </script> ``` #### 方法三:调整样式属性防止意外失焦 某些情况下,可能是由于 CSS 样式冲突引起的失焦问题。检查是否有其他元素覆盖住了 `textarea` 输入区域,或者是否存在 padding/margin 设置不当的情况影响到了交互效果[^3]。适当调整这些样式可以帮助避免不必要的失焦行为: ```css /* 确保安全区域内有足够的空间 */ padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值