Ext.NET框架下移除TextField的InputType="Password"后如何掩码字符为密码圆点

我之前在使用Ext.NET开发时也碰到过一模一样的问题——设置InputType="Password"会被Chrome自动填充，去掉又没法掩码输入内容。这里有两个实用的方案可以完美解决你的需求：

方案1：通过CSS实现密码掩码效果 #

原生密码框的掩码效果依赖InputType="Password"，我们可以用CSS的文本安全属性来模拟这个效果，无需依赖原生密码类型：

• 针对Chrome、Edge等webkit内核浏览器，使用-webkit-text-security: disc;
• 针对Firefox，使用text-security: disc;（Firefox 94+已支持该属性）

具体实现步骤：

1. 给TextField添加自定义样式类：

X.TextField()
    .Cls("custom-password-field")

2. 在页面的样式表中定义对应的CSS：

.custom-password-field input {
  -webkit-text-security: disc;
  text-security: disc;
  /* 如果需要统一显示为星号，可以把disc换成circle或者square */
}

方案2：禁用浏览器自动填充（关键补充） #

虽然Ext.NET的TextField没有直接暴露autocomplete属性，但可以通过CustomConfig手动添加这个属性，彻底避免Chrome的自动填充行为：

X.TextField()
    .Cls("custom-password-field")
    .CustomConfig(config => {
        // 使用new-password比off更可靠，部分浏览器会忽略off
        config.Add(new ConfigItem("autocomplete", "new-password", ParameterValue.String));
    })

autocomplete="new-password"会明确告诉浏览器：这是一个需要用户输入新密码的字段，不要自动填充已保存的密码。

兼容老浏览器的备选方案 #

如果需要兼容IE这类不支持text-security的老浏览器，可以用JavaScript监听输入事件，将显示的字符替换为圆点，同时把真实密码存储在隐藏字段中。不过这种方式需要处理光标定位、回退删除等细节，实现起来稍复杂，优先推荐前面的CSS方案。

内容的提问来源于stack exchange，提问作者aggicd