uni-app textarea/input组件 微信小程序 ios端 第一次聚焦后自动失焦

uni-app textarea/input组件 微信小程序 ios端 第一次聚焦后自动失焦

开发环境 版本号 项目创建方式
Windows window11 HBuilderX

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

4.74

第三方开发者工具版本号：

stable1.0.6.2409140

基础库版本号：

3.8.7

项目创建方式：

HBuilderX

示例代码：

// bottom为键盘高度  bottom不为0时则键盘聚焦   
<template>  
    <view class="input-wrap flex col" :style="viewStyle">  
        <view class="flex align-center">  
            <view class="flex align-center" @tap="changeAnonymousFlag">  
                <image :src="NI_MING" mode="widthFix" class="niming-logo" v-if="anonymousFlag == 10"></image>  
                <view class="hide-box" v-else></view>  
                <text class="niming">匿名</text>  
            </view>  
            <textarea class="qx-input-content" cursor-spacing="20" auto-height v-model="content" confirm-type="send"  
                :confirm-hold="true" :show-confirm-bar="false" @confirm="send" :adjust-position="false"  
                @keyboardheightchange="keyboardHeightChange" placeholder="请输入消息..."  
                placeholder-class="placeholder-class" @blur="areaBlur" :maxlength="100" @focus="areaFocus"></textarea>  

            <view class="options-box relative flex col align-center" v-if="!showSendBtn">  
                <view class="relative">  
                    <view class="39size">  
                        <Agree size="39rpx" :params="{businessId:info.dynamicId,businessType}" ref="agreeRef"  
                            @change="agreeChange" :praiseFlag="info.praiseFlag"  
                            agreeUrl="/pagesCircle/static/input-agree.png" agreedUrl="/pagesCircle/static/agreed3.png"  
                            mode="heightFix" />  
                        <view class="tips-texts flex align-center" v-if="info.praiseNum > 0">  
                            <text>{{info.praiseNum}}</text>  
                        </view>  
                    </view>  
                </view>  
                <text>点赞</text>  
            </view>  
            <view class="options-box relative flex col align-center" v-if="!showSendBtn">  
                <view class="relative">  
                    <view class="39size">  
                        <button open-type="share" class="fill share-btn" @tap="forwardIt(info)"></button>  
                        <image :src="SHARE_LOGO_ICON" mode="heightFix" class="qx-logo"></image>  
                        <view class="tips-texts flex align-center share-tips-text" v-if="info.forwardNum > 0">  
                            <text>{{info.forwardNum}}</text>  
                        </view>  
                    </view>  
                </view>  
                <text>转发</text>  
            </view>  
            <view class="send-logo" v-if="showSendBtn" @tap="send">  
                <image :src="SEND_ICON" mode="widthFix"></image>  
            </view>  
        </view>  
    </view>  
</template>

操作步骤：

示例

预期结果：

键盘正常拉起 不会出现聚焦后立刻失焦的情况

实际结果：

textarea/input组件 ios端 第一次聚焦后自动失焦

bug描述：

通过监听textarea或input组件键盘高度事件 改变组件外层容器的样式:
当键盘高度大于0时 外层容器样式为固定定位 bottom值为键盘高度
问题：
在IOS端 textarea组件第一次聚焦后又立刻失焦 导致页面出现抖动
安卓无此问题


更多关于uni-app textarea/input组件 微信小程序 ios端 第一次聚焦后自动失焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

测试一下原生微信小程序iOS的表现是否一致

更多关于uni-app textarea/input组件 微信小程序 ios端 第一次聚焦后自动失焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有

这是一个在uni-app开发微信小程序时常见的iOS兼容性问题。主要原因是iOS系统对键盘事件和页面布局变化的处理机制与Android不同。

问题分析： 当textarea聚焦时，键盘弹出触发keyboardheightchange事件，你通过改变外层容器的bottom样式来调整布局。iOS系统检测到布局变化后，可能会认为焦点需要重新计算，导致textarea失焦。

解决方案：

  1. 延迟布局调整
keyboardHeightChange(e) {
    const height = e.detail.height
    // 添加延迟，避免布局变化与焦点冲突
    setTimeout(() => {
        this.viewStyle = height > 0 ? `position: fixed; bottom: ${height}px;` : ''
    }, 100)
}
  1. 优化focus/blur处理
areaFocus() {
    this.isFocus = true
    // 避免在focus时立即进行布局调整
}

areaBlur() {
    this.isFocus = false
    // 可以在这里处理布局恢复
}
  1. 使用CSS动画优化 考虑使用CSS transform代替bottom定位，减少布局重排：
.input-wrap {
    transition: transform 0.3s ease;
}
.input-wrap.keyboard-up {
    transform: translateY(-${keyboardHeight}px);
}
回到顶部