Advanced Search

placeholders using jQuery

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.        $('.inputfield').each(function(){
  4.            $(this).val('');
  5.            add_placeholder($(this));
  6.        })
  7.  
  8.        $('.inputfield').focus(function(){
  9.            remove_placeholder($(this));
  10.        }).blur(function(){
  11.            add_placeholder($(this));
  12.        }).blur();
  13.     });
  14.  
  15.    function add_placeholder(field)
  16.    {
  17.        var placeholder = field.attr('name');
  18.        if(field.val() == '')
  19.        {
  20.             field.val(placeholder);
  21.             field.addClass('placeholder');
  22.        }
  23.    }
  24.  
  25.    function remove_placeholder(field)
  26.    {
  27.        var placeholder = field.attr('name');
  28.        if(field.val() == placeholder)
  29.        {
  30.             field.val('');
  31.             field.removeClass('placeholder');
  32.        }
  33.    }
  34.  
  35. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.