避坑--a-input-password触发浏览器自动填充

背景

接口没有返回账号、密码信息,但是打开表单后,自动填充了浏览器存储的账号密码。
请添加图片描述

原因分析

在使用Ant Design(通常简写为a-),特别是a-input-password组件时,如果遇到Chrome等浏览器的自动填充功能干扰了你的设计或用户体验。

解决方案

  1. 添加 autocomplete="new-password"
    <a-input-password 
      autocomplete="new-password"
      v-model:value="password"
    />
    
  2. 使用readonly属性配合事件处理,防止初始自动填充:
    <a-input-password 
      readonly
      @focus="e => e.target.removeAttribute('readonly')"
      v-model:value="password"
    />
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值