[RESOLVED]set watermark for password in asp.net

Hi I want to set watermark for textbox with textmode password. It fails. Here is the code -

function WaterMark(txt, evt, text) {
if (txt.value.length == 0 && evt.type == "blur") {
txt.style.color = "gray";
txt.value = text;
}
if (txt.value == text && evt.type == "focus") {
txt.style.color = "black";
txt.value = "";
}
}

You can try with the below code

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
      $(document).ready(function() {
       var watermark = 'Enter Your Password';
       $('#inputTextboxId').blur(function(){
        if ($(this).val().length == 0)
          $(this).attr('type', 'text');
          $(this).val(watermark).addClass('watermark');
       }).focus(function(){
        if ($(this).val() == watermark)
           $(this).attr('type', 'password');
          $(this).val('').removeClass('watermark');
       }).val(watermark).addClass('watermark').attr('type', 'text');
      });
  </script>
  <style type="text/css">
        /*Css style for your textbox*/
        .watermark
        {
            font-family: Arial;
            color: gray;
        }
    </style>
</head>
<body>
    <input id="inputTextboxId"  type="password"/>
</body>
</html>

Most modern browsers will support the HTML5
placeholder attribute
  to define your specific placeholder text as you mention (as there is no reason to write the logic for this on your own) :

<!-- Pure HTML Reference -->
<input type='password' placeholder='Password' />
<!-- ASP.NET Reference -->
<asp:TextBox ID="Password" runat="server" TextMode="Password" placeholder="Password"></asp:TextBox>

You can see in this compatibility chart that almost all of the major browsers support it, however Internet Explorer did not widely begin support for placeholders until IE10 (and beyond). You
might need to resort to a Javascript-based solution like this jQuery plug-in to implement it as seen below :

<!-- Necessary jQuery Reference -->
<script src="jquery-2.1.1.min.js"></script>
<!-- Reference the placeholder.js file -->
<script src="jquery.placeholder.js">
<!-- Wire up your placeholders -->
<script type='text/javascript'>
    $(function(){
      // Set this up for all inputs and textareas
      $('input,textarea').placeholder();
    })
</script>
<style type='text/css'>
    /* Styles for your place holder and normal elements (Example) */
    input, textarea { color: #000; }
    .placeholder { color: #aaa; }
</style>

<!-- Use placeholder like your normally would -->
<input placeholder='This is an example' />

An example available on the plug-in site and it appears to work properly within IE 8 (emulated) as seen below :

It is not working for 

asp textbox

aditya1986

It is not working for 

asp textbox

Could you post what you are currently using? What browser are you targeting?

aditya1986

It is not working for 

asp textbox

Have you added the necessary Jquery reference in your page.?

 Also Please find the complete code given below for Asp textboxcontrol

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            var watermark = 'Enter Your Password';
            $('#TextBox1').blur(function () {
                if ($(this).val().length == 0)
                    $(this).attr('type', 'text');
                $(this).val(watermark).addClass('watermark');
            }).focus(function () {
                if ($(this).val() == watermark)
                    $(this).attr('type', 'password');
                $(this).val('').removeClass('watermark');
            }).val(watermark).addClass('watermark').attr('type', 'text');
        });
    </script>
    <style type="text/css">
        /*Css style for your textbox*/
        .watermark
        {
            font-family: Arial;
            color: gray;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>
    </form>
</body>
</html>

Rendered Demo

Leave a Reply