ASP.NET输入控件autocomplete属性ARC-Toolkit检测报错求助

问题根源 #

当你把asp:TextBox的TextMode设为Password时，ASP.NET会将其渲染为<input type="password">。ARC-Toolkit的校验逻辑默认认为type="password"的输入框应该使用密码类autocomplete属性（如current-password、new-password），因此会判定cc-number为无效属性，触发警告。

可行解决方案 #

1. 替换TextMode为SingleLine，用CSS模拟密码隐藏效果 #

将TextMode="Password"改为TextMode="SingleLine"，通过CSS样式实现输入内容隐藏，这样渲染出的是type="text"的输入框，autocomplete="cc-number"就能符合校验规范：

<asp:TextBox
    aria-describedby="errorCardNumber"
    OnTextChanged="cardNumber_TextChanged"
    onkeypress="return handleCardNumberEnter(event);"
    onblur="onCardNumberBlur(this)"
    MaxLength="20"
    TabIndex="0"
    TextMode="SingleLine"
    ID="cardNumber"
    runat="server"
    CssClass="cardNumber inputText" 
    autocomplete="cc-number" 
    Style="-webkit-text-security: disc; text-security: disc;" />

注：该CSS属性在主流现代浏览器中都支持，旧版浏览器可能存在兼容性问题。

2. 后台动态添加autocomplete属性 #

ASP.NET的TextBox控件在TextMode="Password"时，可能会限制直接设置非密码类autocomplete属性，可在后台事件中手动添加该属性，绕过控件的属性校验：

protected void Page_Load(object sender, EventArgs e)
{
    // 先移除前台可能存在的重复属性，再添加
    cardNumber.Attributes.Remove("autocomplete");
    cardNumber.Attributes.Add("autocomplete", "cc-number");
}

同时记得删除前台标记中的autocomplete="cc-number"，避免属性重复。

3. 改用原生HTML输入控件（带服务器端支持） #

如果不需要ASP.NET服务器控件的特定功能，直接使用原生HTML input，或添加runat="server"保留服务器端操作能力：

<input type="text"
       id="cardNumber"
       runat="server"
       class="cardNumber inputText"
       aria-describedby="errorCardNumber"
       onkeypress="return handleCardNumberEnter(event);"
       onblur="onCardNumberBlur(this)"
       maxlength="20"
       tabindex="0"
       autocomplete="cc-number"
       style="-webkit-text-security: disc; text-security: disc;" />

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