el-input输入框自动输入问题

背景

在浏览器中因记录过该网站记住密码操作，或者其他类似行为，导致包含表单的某些input 在鼠标划过时自动输密码行为

无效操作

auto-complete="off"

解释说明

在大多数现代浏览器中，autocomplete 设置为“off”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。请参阅 autocomplete 属性与登录表单一文。

解决办法

css + html属性天下无敌🏄

<el-input
  maxlength="11"
  class="no-autofill"
  auto-complete="new-password"
  v-model.trim="ruleForm.mobile"
  placeholder="请输入联系方式"
></el-input>
        
        
.no-autofill {
    /deep/.el-input__inner {
    -webkit-text-security: disc !important;
    }
}

解释定义

定义classclass="no-autofill",进行对.el-input__inner 进行赋值 -webkit-text-security，但具有浏览器限制

webkit-text-security是CSS属性，用于指定在密码或其他敏感输入字段中输入信息时所使用的字符掩码。它只在基于WebKit的浏览器（如Chrome、Safari和某些版本的Microsoft Edge）和某些其他支持它的浏览器中起作用。

webkit-text-security属性的值可以是以下值之一：

none：文本未掩码，在输入字段中可见。

circle：文本被替换为小圆圈，通常用于屏蔽密码。

disc：文本被替换为实心圆圈，也通常用于屏蔽密码。

square：文本被替换为方块，可能在某些情况下用于掩盖敏感信息。

auto-complete="new-password",告知浏览器填写该字段的预期信息类型MDN 不会对设置的type有冲击，所以不必担心内容输入为**,

可用于
a>新密码
b> 阻止自动填充

浏览器兼容性

autocomplete

css -webkit-text-security