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.


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.