locked
How to hide watermark AFTER user started typing? RRS feed

  • Question

  • User1067676423 posted

    How to hide watermark AFTER user started typing? plz example or some codes???

    Friday, May 2, 2014 9:25 PM

Answers

  • User2103319870 posted

    guys i want it like the textbox in this site http://swappa.com/esn

    You can try with the updated 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() {
             //Change your watermark text here as per you need
           var watermark = 'Enter Your Password';
           $('#inputTextboxId').keypress(function(){
             //Check if user entered any value
             if ($(this).val().length != 0)
               //If so then remove the watermark
             $(this).val('').removeClass('watermark');
           }).val(watermark).addClass('watermark');
          });
      </script>
      <style type="text/css">
            /*Css style for your textbox*/
            watermark
            {
                font-family: Arial;
                color: gray;
            }
        </style>
    </head>
    <body>
        <input id="inputTextboxId" type="text" />
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 2, 2014 11:49 PM
  • User2103319870 posted

    Salnaggar

    how about if the user deleted the value ? u forgot that!!  i want u to add if the user delted the value run the watermark again!!!

    Oh ya I missed to implement that. Please accept my apologies.

    You can use 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 type="text/javascript">
            $(document).ready(function () {
                //Change your watermark text here as per you need
                var watermark = 'Enter Your Password';
                $('#inputTextboxId').keypress(function () {
    
                    //Check if user entered any value
                    if ($(this).val().length != 0) {
                        //If so then remove the watermark
                        $(this).removeClass('watermark');
                        $(this).val($(this).val().split(watermark).join(""));
                    }
                    else {
                        //if value is empty then add the watermark
                        $(this).val(watermark).addClass('watermark');
                    }
                }).on('keyup', function (e) {
                    if (e.keyCode == 8 || e.keyCode == 46) {
                        $('#inputTextboxId').trigger('keypress');
                    }
                }).val(watermark).addClass('watermark');
            });
        </script>
    </head>
    <body>
        <input id="inputTextboxId" type="text" />
    </body>
    </html>

    EDIT: Update the code

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 3, 2014 1:20 AM

All replies

  • User-1440927403 posted

    Do you mean placeholder like here in this example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_placeholder

    Friday, May 2, 2014 10:32 PM
  • User2103319870 posted

    You have a variety of options to show a Watermark on textbox. One option is to use Use JQuery to show a Watermark text in textbox.

    Please find a sample implementation given below

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

    Edit: Updated the demo

    Friday, May 2, 2014 11:03 PM
  • User2103319870 posted

    You can also use  Ajax Control Toolkit watermark extender to show watermark on textbox.

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="false">
                    </asp:ToolkitScriptManager>
                    <asp:TextBox ID="TextBox3" runat="server" Width="222px"></asp:TextBox>
                    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" runat="server" TargetControlID="TextBox3"
                        WatermarkText="Enter Your Password">
                    </asp:TextBoxWatermarkExtender>

    Complete Code

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release" CombineScripts="false">
            </asp:ToolkitScriptManager>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" WatermarkText="Enter your Password" 
    TargetControlID="TextBox3"> </asp:TextBoxWatermarkExtender> </div> </form> </body> </html>

     

    Output

    Friday, May 2, 2014 11:14 PM
  • User1067676423 posted

    i mean when user started typing 

    Friday, May 2, 2014 11:30 PM
  • User1067676423 posted

    yeah but for 

    <asp:TextBox ID="TextBox" runat="server"></asp:TextBox>
    Friday, May 2, 2014 11:32 PM
  • User1067676423 posted

    guys i want it like the textbox in this site http://swappa.com/esn

    Friday, May 2, 2014 11:35 PM
  • User2103319870 posted

    guys i want it like the textbox in this site http://swappa.com/esn

    You can try with the updated 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() {
             //Change your watermark text here as per you need
           var watermark = 'Enter Your Password';
           $('#inputTextboxId').keypress(function(){
             //Check if user entered any value
             if ($(this).val().length != 0)
               //If so then remove the watermark
             $(this).val('').removeClass('watermark');
           }).val(watermark).addClass('watermark');
          });
      </script>
      <style type="text/css">
            /*Css style for your textbox*/
            watermark
            {
                font-family: Arial;
                color: gray;
            }
        </style>
    </head>
    <body>
        <input id="inputTextboxId" type="text" />
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 2, 2014 11:49 PM
  • User1067676423 posted

    THANK YOU 

    A2H!!!

    Friday, May 2, 2014 11:51 PM
  • User2103319870 posted

    Glad to be of help

    Friday, May 2, 2014 11:53 PM
  • User1067676423 posted

    A2H look at this

    <script>
    $(document).ready(function() {
    //Change your watermark text here as per you need
    var watermark = 'Enter Your Password';
    $('#inputTextboxId').keypress(function(){
    //Check if user entered any value
    if ($(this).val().length != 0)
    //If so then remove the watermark
    $(this).val('').removeClass('watermark');
    }).val(watermark).addClass('watermark');
    });
    </script>

    how about if the user deleted the value ? u forgot that!!  i want u to add if the user delted the value run the watermark again!!!

    Friday, May 2, 2014 11:56 PM
  • User2103319870 posted

    Salnaggar

    how about if the user deleted the value ? u forgot that!!  i want u to add if the user delted the value run the watermark again!!!

    Oh ya I missed to implement that. Please accept my apologies.

    You can use 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 type="text/javascript">
            $(document).ready(function () {
                //Change your watermark text here as per you need
                var watermark = 'Enter Your Password';
                $('#inputTextboxId').keypress(function () {
    
                    //Check if user entered any value
                    if ($(this).val().length != 0) {
                        //If so then remove the watermark
                        $(this).removeClass('watermark');
                        $(this).val($(this).val().split(watermark).join(""));
                    }
                    else {
                        //if value is empty then add the watermark
                        $(this).val(watermark).addClass('watermark');
                    }
                }).on('keyup', function (e) {
                    if (e.keyCode == 8 || e.keyCode == 46) {
                        $('#inputTextboxId').trigger('keypress');
                    }
                }).val(watermark).addClass('watermark');
            });
        </script>
    </head>
    <body>
        <input id="inputTextboxId" type="text" />
    </body>
    </html>

    EDIT: Update the code

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 3, 2014 1:20 AM