Masking ASP.NET TextBox as password when TextMode is MultiLine

Question

I have an ASP.NET TextBox with TextMode set to as MultiLine. The content of the TextBox should be displayed as password instead of plain text.

At same time it is not possible to set TextMode as both Password and MultiLine. Is there any alternative way to achieve this?

Answer 1

I don't think there is a non-trivial way to achieve this without finding a low level solution.

• When you set TextBox.TextMode as Password then an <input type="password"/>

• When you set TextBox.TextMode as MultiLine then a <textarea/>

HTML element is rendered to the client.

The problem is that the TextArea HTML element doesn't support password characters. But there is a reasonable workaround: Using a CSS style to blur the TextBox characters. First add a new item (Web Forms Server Control) to your project and modify it so that it looks like:

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

namespace TestAspNetWebApp
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:SecretTextArea runat=server></{0}:SecretTextArea>")]
    public class SecretTextArea : TextBox
    {
        public SecretTextArea()
        {
            TextMode = TextBoxMode.MultiLine;
            Attributes.CssStyle.Add("color", "transparent");
            Attributes.CssStyle.Add("text-shadow", "0 0 4px rgba(0,0,0,0.5)");

            Text = "This is a semi-secret text.";
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            output.Write(Text);
        }
    }
}

Build your project. Drag-n-drop the SecretTextArea control from VS Toolbox to your web form. The result is:

The advantage of this blurring method is that you can see and edit the text. Also you can set the blurring amount by changing the px value in the text-shadow attribute.