Question posted in
The official documentation can be found here.

Masking asp.net textbox text with textMode as multiline

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?

Tags:

2

Answers


  1. 0

    You have to "compromise" somewhat here.

    So, when the user types, you not see "*", but they will not see what they type.

    So, drop in a text box, set mode = "multi-line", and thus this markup:

            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"
            style="color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.5);"
            Height="213px" Width="307px"                               
            ></asp:TextBox>

    So, we add a blur to the text, and the result is actually quite nice:

    eg this:

    enter image description here

    If you don’t compromise a bit, then you can find some "messy" JavaScript solutions. However, I think the above works and looks just as well/nice as a password box with "*" anyway.

    And such a text box? Well, I have no idea why one wants this (perhaps a screen to send some secret message).

    So, try the above, I think it is a "reasonable" solution.

    Login or Signup to reply.
  2. 0

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

    When you set the TextBox.TextMode as Password then it renders an <input type="password"/> HTML element to the client.

    When you set the TextBox.TextMode as MultiLine then it renders a <textarea/> HTML element to the client.

    The problem is that the TextArea HTML element doesn’t support password characters. But there is a reasonable workaround:
    Using 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:

    enter image description here

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search