How to change textmode of Textbox from text to password in JavaScript? RRS feed

  • Question

  • User914590620 posted

     We can not change the textmode of textbox in JavaScript . Because  textmode  is design property.

    But we can do it in other way.

    On page load

    TextBox1.Attributes.Add("onfocus", "if(this.value.toLowerCase() == 'password'){document.getElementById('DivPwdTxt').style.display = 'none'; document.getElementById('Divpwd').style.display='inline';document.getElementById('ctl00_Password').focus(); }");
            Password.Attributes.Add("onBlur", "if(this.value == ''){document.getElementById('Divpwd').style.display='none'; document.getElementById('DivPwdTxt').style.display = 'inline';}");


    UserName.Attributes.Add("onfocus", "if(this.value.toLowerCase() == 'userid') this.value = '';");
            UserName.Attributes.Add("onBlur", "if(this.value == '') this.value = 'UserId';");

    and on

    .aspx page

    <asp:Label ID="Label2" runat="server" CssClass="label1" Text="UserId" Width="50 px" ></asp:Label>
                                            <asp:TextBox runat="server" ID="UserName" CssClass="label1" Text="UserId" Width="120 px" ></asp:TextBox>
                                             <asp:Label ID="Label3" runat="server" CssClass="label1" Text="Password" Width="50 px"></asp:Label>
                                             <div id="DivPwdTxt">
                                            <asp:TextBox runat="server" ID="TextBox1" CssClass="label1" Width="120 px" Text="Password" AutoPostBack="false"></asp:TextBox>
                                            <div id="Divpwd" style="display:none;">
                                            <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="label1" Width="120 px" AutoPostBack="false"></asp:TextBox>


    Thursday, January 3, 2008 5:56 AM

All replies

  • User-946351013 posted


    I am asuming you wan't to change the input to be a textbox when entering password and a password field when you get out of it. To do so you can use javascript to change the type of the field.


        <input type="password" id="bob" onfocus="this.type='text';" onblur="this.type='password';" />

    So when you enter the textbox you would see text and on exit it sets back to password. With javascript off it woudl just be a normal password box. To do this in you .net code you could use a textbox control on the page like this:

    <asp:TextBox ID="txt1" TextMode="Password"></asp:TextBox>

    Then in your page load add the attributes:

    txt1.Attributes.Add("onfocus", "this.type='text';");
    txt1.Attributes.Add("onblur", "this.type='password';");

    I think this will give you the affect you are after.






    Friday, January 18, 2008 11:50 PM
  • User914590620 posted

     Sry My Dear freind,

    but there is a javascript error."htmlfile: Could not get the type property" 

    Monday, January 21, 2008 4:38 AM
  • User-946351013 posted

    What browser are you using? Post code if possible ill take a look.



    Monday, January 21, 2008 6:01 AM
  • User914590620 posted

     code is same as you are posted. it's working on mozilla but not on IE7.

    TxtBox.Attributes.Add("onfocus", "if(this.value.toLowerCase() == 'password'){this.value = ' ' ; this.type='password';}"); 

    Tuesday, January 22, 2008 4:24 AM
  • User-946351013 posted

     Sorry, I didnt test in IE, I feel a little stupid now. Having a quick google it doesnt look like it can be done. Will look into it tommorow.


    Tuesday, January 22, 2008 5:15 AM
  • User914590620 posted

    its ok man....if we dont make mistake. we would not remain human any more...So, we ll disscuss it 2morrow. 

    Tuesday, January 22, 2008 7:48 AM
  • User1619792777 posted

    i built a script which i used to show/hide users password on clicking show/hide button

    <script language="javascript" type="text/javascript">
        function ShowText()
          document.getElementById('<%=BtnHideText.ClientID%>').style.display = 'block';
          document.getElementById('<%=BtnShowText.ClientID%>').style.display = 'none';
          document.getElementById('<%=TxtOldTxtPwd.ClientID%>').style.display = 'block';
          document.getElementById('<%=TxtOldPassword.ClientID%>').style.display = 'none';
          document.getElementById('<%=TxtOldTxtPwd.ClientID%>').value =  document.getElementById('<%=TxtOldPassword.ClientID%>').value;
          return false;
        function HideText()
          document.getElementById('<%=BtnShowText.ClientID%>').style.display = 'block';
          document.getElementById('<%=BtnHideText.ClientID%>').style.display = 'none';
          document.getElementById('<%=TxtOldTxtPwd.ClientID%>').style.display = 'none';
          document.getElementById('<%=TxtOldPassword.ClientID%>').style.display = 'block';
          document.getElementById('<%=TxtOldPassword.ClientID%>').value =  document.getElementById('<%=TxtOldTxtPwd.ClientID%>').value;
          return false;


    <asp:TextBox runat="server" CssClass="textfield" ID="TxtOldPassword" TextMode="Password"  />
    <asp:TextBox runat="server" CssClass="textfield" ID="TxtOldTxtPwd" style ="display:none" />

    <asp:Button runat="server" ID="BtnShowText" Text="Show Text" OnClientClick="javascript:return ShowText()" />
    <asp:Button runat="server" ID="BtnHideText" Text="Hide Text" Style="display: none"
                                        OnClientClick="javascript:return HideText()" />

    Monday, February 8, 2010 9:52 AM
  • User1069387105 posted

    Thanks Siva!

    I have modified your script to automatically switch between the word password and the hidden dots -using on focus() and onblur(). If nothing is typed the word password comes back.

        <script language="javascript" type="text/javascript">
            function ShowText() {
                var aPasswordValue = document.getElementById('<%=thePasswordTextBox.ClientID%>').value;
                if (aPasswordValue == "") {
                    document.getElementById('<%=theRegularTextBox.ClientID%>').style.display = 'block';
                    document.getElementById('<%=thePasswordTextBox.ClientID%>').style.display = 'none';
            function HideText() {
                document.getElementById('<%=theRegularTextBox.ClientID%>').style.display = 'none';
                document.getElementById('<%=thePasswordTextBox.ClientID%>').style.display = 'block';
        <asp:TextBox runat="server" ID="thePasswordTextBox" Style="display: none" TextMode="Password" onblur="ShowText();" />
        <asp:TextBox runat="server" ID="theRegularTextBox" onfocus="HideText();" Text="Password"/>

    Friday, May 14, 2010 3:40 PM