ASP.NET中TextMode为MultiLine的TextBox如何实现密码掩码显示

因为ASP.NET的TextBox控件无法同时设置TextMode="Password"和TextMode="MultiLine"，下面提供几个可行的替代方案：

方案一：原生TextArea + CSS样式掩码 #

直接使用HTML原生<textarea>，通过CSS让输入内容显示为密码掩码字符，兼容性较好（webkit内核浏览器原生支持，Firefox可通过背景图模拟）。

代码示例： #

<%-- Webkit内核（Chrome/Edge/Safari）直接支持 --%>
<textarea id="txtMultiPwd" runat="server" rows="5" cols="40" 
          style="-webkit-text-security: disc; text-security: disc;"></textarea>

<%-- Firefox兼容模拟方案 --%>
<style>
    .firefox-pwd {
        background-image: linear-gradient(to right, #000 0%, #000 100%);
        background-size: 1em 1px;
        background-repeat: repeat-x;
        background-position: bottom 0.5em center;
        letter-spacing: 0.6em;
        color: transparent;
        caret-color: #000;
    }
</style>
<textarea id="txtMultiPwdFirefox" runat="server" rows="5" cols="40" class="firefox-pwd"></textarea>

注意点： #

• Webkit内核的text-security属性支持disc（圆点）、circle（圆圈）、square（方块）三种掩码样式；
• Firefox的模拟方案是通过背景下划线+隐藏文字颜色实现，视觉效果接近密码框，可根据需求调整letter-spacing和背景位置。

方案二：JavaScript处理显示与真实值分离 #

通过JavaScript将显示的掩码字符与真实输入内容分离，兼容性覆盖所有浏览器，适合对兼容性要求高的场景。

代码示例： #

<asp:TextBox ID="txtDisplay" runat="server" TextMode="MultiLine" Rows="5" Columns="40"></asp:TextBox>
<asp:HiddenField ID="hdnRealPwd" runat="server" />

<script>
    const displayBox = document.getElementById('<%= txtDisplay.ClientID %>');
    const hiddenField = document.getElementById('<%= hdnRealPwd.ClientID %>');
    
    // 初始化：如果后台已有值，显示对应长度的掩码
    if (hiddenField.value) {
        displayBox.value = new Array(hiddenField.value.length + 1).join('●');
        displayBox.dataset.realValue = hiddenField.value;
    }

    // 处理输入事件
    displayBox.addEventListener('input', function(e) {
        const inputChar = e.data;
        // 更新真实值
        let realValue = this.dataset.realValue || '';
        if (inputChar) {
            realValue += inputChar;
        } else {
            // 处理删除操作
            realValue = realValue.slice(0, -1);
        }
        this.dataset.realValue = realValue;
        hiddenField.value = realValue;
        // 更新显示的掩码
        this.value = new Array(realValue.length + 1).join('●');
    });

    // 处理粘贴事件
    displayBox.addEventListener('paste', function(e) {
        e.preventDefault();
        const pastedText = (e.clipboardData || window.clipboardData).getData('text');
        const realValue = (this.dataset.realValue || '') + pastedText;
        this.dataset.realValue = realValue;
        hiddenField.value = realValue;
        this.value = new Array(realValue.length + 1).join('●');
    });
</script>

注意点： #

• 后台获取真实密码时，直接读取hdnRealPwd.Value即可；
• 需处理粘贴、删除等操作，确保掩码与真实值同步；
• 页面回发后，要重新初始化显示掩码，避免真实值暴露。

方案三：自定义ASP.NET服务器控件 #

如果需要在多个页面复用多行密码输入框，可以自定义一个服务器控件，封装显示与逻辑，使用方式和原生TextBox一致。

代码示例（C#）： #

using System.Web.UI;
using System.Web.UI.WebControls;

public class MultiLinePasswordTextBox : TextBox
{
    protected override void Render(HtmlTextWriter writer)
    {
        // 渲染显示用的textarea（掩码）
        writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID);
        writer.AddAttribute(HtmlTextWriterAttribute.Name, $"{UniqueID}_Display");
        writer.AddAttribute("rows", Rows.ToString());
        writer.AddAttribute("cols", Columns.ToString());
        writer.AddStyleAttribute("-webkit-text-security", "disc");
        writer.AddStyleAttribute("text-security", "disc");
        writer.RenderBeginTag(HtmlTextWriterTag.Textarea);
        writer.Write(new string('●', Text.Length));
        writer.RenderEndTag();

        // 渲染隐藏字段保存真实值
        writer.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
        writer.AddAttribute(HtmlTextWriterAttribute.Id, $"{ClientID}_Real");
        writer.AddAttribute(HtmlTextWriterAttribute.Name, UniqueID);
        writer.AddAttribute(HtmlTextWriterAttribute.Value, Text);
        writer.RenderBeginTag(HtmlTextWriterTag.Input);
        writer.RenderEndTag();
    }

    public override string Text
    {
        get => Context.Request.Form[UniqueID] ?? base.Text;
        set => base.Text = value;
    }
}

使用方式： #

1. 将控件代码放到App_Code目录；
2. 在页面顶部注册控件：

<%@ Register TagPrefix="custom" Namespace="YourNamespace" Assembly="YourAssembly" %>

3. 像普通TextBox一样使用：

<custom:MultiLinePasswordTextBox ID="txtMultiPwd" runat="server" Rows="5" Columns="40"></custom:MultiLinePasswordTextBox>

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