4/11/2012

Put text inside Textbox with jQuery

   1:  //jQuery code
   2:  $(function() {
   3:      $('input.text_inside').each(function() {
   4:          //keep data input add in textbox
   5:          $(this).data("txt", $.trim($(this).val()));
   6:      }).focus(function() {
   7:          // focus when mouse click on textbox
   8:          if ($.trim($(this).val()) === $(this).data("txt")) {
   9:              $(this).val("");
  10:          }
  11:      }).blur(function() {
  12:          // blur when click out textbox
  13:          if ($.trim($(this).val()) === "") {
  14:              //Recover text default
  15:              $(this).val($(this).data("txt"));
  16:          }
  17:      });
  18:  });

Html code: add  class="text_inside"

   1:  <input name="txtSearch" type="text" value="keyword for search..." id="txtSearch" class="text_inside">

Categories:
If You Enjoyed This Post Please Take 5 Seconds To Share It.

0 comments:

Post a Comment

 
  • I'm a great believer that any tool that enhances communication has profound effects in terms of how people can learn from each other, and how they can achieve the kind of freedoms that they're interested in.

  • Followers