How to clear text box value when user clicks inside it

<asp:TextBox ID="Txt_search" runat="server开发者_运维问答">Group Name..</asp:TextBox>

I want to clear the text inside the text box when user clicks inside the text box to enter the keyword to search. How do I do that?

with jquery:

$(function() {

    $('input[type=text]').focus(function() {

           $(this).val('');
      });

 });

from: How to clear a textbox onfocus?

The script below handles both the onfocus and onblur events removing your default "Group Name.." when focused and adding it back if the user moves off the field without changing anything.

<script type="text/javascript">
  var txtsearch = document.getElementById("Txt_search");
  txtsearch.onfocus = function () {
    if (this.value == "Group Name..") {
      this.value = "";
    }
  };

  txtsearch.onblur = function () {
    if (this.value.length == 0) {
      this.value = "Group Name...";
    }
  }
</script>

I guess you could do that easily using jQuery something like below.

    $('#<%=Txt_search.ClientID%>').click(function() {
         $(this).val("");
    });

using jquery to clear textbox on focus and set it back with default on blur

$(document).ready(function(){
  $('#<%=Txt_search.ClientID%>')
    .focus(function(){  
      if($(this).val()=='Group Name..')
      {
         $(this).val('');
      }
  })
   .blur(function () {
            if ($(this).val() == '') {
                $(this).val('Group Name..');
            }
        });
});

Demo

Since you are using asp.net webforms, i think you'll be better off using the AjaxControlToolkit specifically the TextBoxWaterMarkExtender control.

See sample code below.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:TextBoxWatermarkExtender ID="TextBox1_TextBoxWatermarkExtender" 
                    runat="server" Enabled="True" TargetControlID="TextBox1" 
                    WatermarkText="Group Name ...">
                </asp:TextBoxWatermarkExtender>