uni-app ios 微信浏览器中uni-nav-bar被input textarea的focus光标穿透显示

uni-app ios 微信浏览器中uni-nav-bar被input textarea的focus光标穿透显示

产品分类

uniapp/H5

PC开发环境操作系统

Windows

PC开发环境操作系统版本号

win7

HBuilderX类型

正式

HBuilderX版本号

3.1.21

浏览器平台

微信内置浏览器

项目创建方式

HBuilderX

App下载地址或H5网址

https://static.hntv.tv/total/tsb/dxrxH5/index.html

示例代码

<uni-nav-bar @clickLeft="back" status-bar fixed backgroundColor="#fff" title="提交线索">  
<view slot="left">  
<view class="leftback_wrap">  
<image class="leftback" :src="${imgPath}/back.png" mode="scaleToFill"></image>  
</view>  
</view>  
<view slot="right">  
<view class="right-text-wrap">  
<button type="primary" class="right-text" size="mini" @tap="submit()">  
提交  
</button>  
</view>  
</view>  
</uni-nav-bar>  
<view class="wrap">  
<view class="title">  
<text class="user_item_bt">*</text>  
<input class="input" @input="titleInput" v-model="formData.title" maxlength="40" placeholder="请输入标题" :auto-blur="true"/>                  
<!-- (只能输入中文或者字母) -->  
<text class="tit_num">{{ formData.title.length }}/40</text>  
</view>  
<view class="textarea">  
<view class="textarea_top">  
<text class="user_item_bt">*</text>  
<textarea ref="textarearef" v-model="formData.content" @input="contentChange" :adjust-position="false" @confirm="hideKey()"  
style="{ height: areaHeight }" class="area" maxlength="-1" :placeholder="placeholder" type="text">
    </textarea>
</view>
<view class="limit">
    <text class="len">{{ formData.content.length }}/400</text>
    <view class="icon_scacle" @tap="scacle">
        <image class="icon_img" v-if="!isScanle" :src="${imgPath}/scale.png" mode="scaleToFill"></image>
        <image class="icon_img" v-if="isScanle" :src="${imgPath}/scacle_1.png" mode="scaleToFill"></image>
    </view>
</view>
</view>

操作步骤

  • 将输入框向上滑动到标题下被覆盖一半后点击输入框获取光标光标会穿透uni-nav-bar显示

预期结果

  • uni-nav-bar会覆盖底部内容

实际结果

  • uni-nav-bar不能覆盖input和textarea的focus光标

bug描述

  • ios 微信浏览器中uni-nav-bar会被input，textarea的focus光标穿透显示

截图

截图1 截图2


更多关于uni-app ios 微信浏览器中uni-nav-bar被input textarea的focus光标穿透显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app ios 微信浏览器中uni-nav-bar被input textarea的focus光标穿透显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS微信浏览器中常见的z-index层级问题。当输入框获得焦点时，系统会将其提升到最高层级，导致穿透fixed定位的导航栏。

解决方案：

  1. 监听输入框焦点事件：在输入框获得焦点时，动态隐藏导航栏；失去焦点时再显示。
data() {
    return {
        showNavBar: true
    }
},
methods: {
    onInputFocus() {
        this.showNavBar = false;
    },
    onInputBlur() {
        this.showNavBar = true;
    }
}

<uni-nav-bar v-if="showNavBar" ...></uni-nav-bar>
<input [@focus](/user/focus)="onInputFocus" [@blur](/user/blur)="onInputBlur" ... />
回到顶部