Input 设置password eye眼睛在uni-app中失去焦点后再触发焦点无法显示眼睛的ICON

Input 设置password eye眼睛在uni-app中失去焦点后再触发焦点无法显示眼睛的ICON

项目信息 详情
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 11
浏览器平台 Chrome
浏览器版本 136.0.7103.93
项目创建方式 CLI
CLI版本号 3.0.0-4060420250429001

操作步骤：

预期结果：

  • 想要点击eye图标显示密码明文

实际结果：

  • 无法正常显示和点击密码eye图标

bug描述：

Input 设置password类型 eye眼睛，失去焦点后再触发焦点无法显眼睛的ICON，并且要输入内容全部删除再次输入才能显示ICON，官方的Input示例也是如此。

Image


更多关于Input 设置password eye眼睛在uni-app中失去焦点后再触发焦点无法显示眼睛的ICON的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我测试下没复现出你说的问题 你是在什么机型上看的呢？或者提供下录屏看看

更多关于Input 设置password eye眼睛在uni-app中失去焦点后再触发焦点无法显示眼睛的ICON的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app input组件在H5端的显示问题。主要原因是密码输入框的eye图标显示逻辑存在缺陷，当输入框失去焦点后再次获取焦点时，图标未能正确重新渲染。

解决方法可以尝试以下两种方式：

  1. 使用v-if强制重新渲染组件：
<input 
  v-if="showInput"
  password 
  placeholder="请输入密码" 
  @focus="handleFocus"
  @blur="showInput=false; $nextTick(()=>showInput=true)"
/>
  1. 使用自定义图标替代原生eye功能：
<template>
  <view class="input-container">
    <input 
      :password="!showPassword"
      placeholder="请输入密码"
    />
    <text @click="showPassword=!showPassword">
      {{showPassword ? '隐藏' : '显示'}}
    </text>
  </view>
</template>
回到顶部