Posted By

Rembrand on 08/11/10


Tagged

forms


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

damanlovett


Changing the default text value on focus with jQuery


 / Published in: jQuery
 

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

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.

  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" />

Report this snippet  

You need to login to post a comment.