Advanced Search

Changing the default text value on focus with jQuery

/ Published in: jQuery
Save to your folder(s)
Originally from http://www.electrictoolbox.com (see src)\r\nClear the default value of a form field when you click on it (when you want to type) and put it back if you leave without typing anything.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //http://www.electrictoolbox.com/jquery-change-default-value-on-focus/
  2.  
  3. $(document).ready(function() {
  4.  
  5. $('.default-value').each(function() {
  6.     var default_value = this.value;
  7.     $(this).css('color', '#666'); // this could be in the style sheet instead
  8.     $(this).focus(function() {
  9.         if(this.value == default_value) {
  10.             this.value = '';
  11.             $(this).css('color', '#333');
  12.         }
  13.     });
  14.     $(this).blur(function() {
  15.         if(this.value == '') {
  16.             $(this).css('color', '#666');
  17.             this.value = default_value;
  18.         }
  19.     });
  20. });
  21.  
  22. });
  23.  
  24. ---
  25.  
  26. <input type="text" class="default-value" size="30" value="Enter keywords here" />
  27. <input type="text" class="default-value" size="30" value="Another search box" />

URL: http://www.electrictoolbox.com/jquery-change-default-value-on-focus/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.