15Oct/091
Default Form Values with jQuery
Here's a useful jQuery snippet that clears the default values of form fields on focus and refills them if no text is entered. It uses the attribute called defaultValue which stores the original value of a form field.
$(document).ready(function() { $('input[type=text]').focus(function() { if($(this).val() == $(this).attr('defaultValue')) { $(this).val(''); } }) .blur(function() { if($(this).val().length == 0) { $(this).val($(this).attr('defaultValue')); } }); });
For example, assume you have a field like this:
<input type="text" value="Search..." />When the page loads, the text field will have "Search..." filled in. When you focus on it, this text will disappear (assuming it hasn't already been edited by you). When you leave focus without typing anything, the text will reappear.
Similar Posts:
- Add Records to a Queue with jQuery
- Creating a CAPTCHA in PHP with GD
- Create a Slide-In Panel with jQuery
About Steve
Steve is the owner of UltraMega Tech. He is a freelance Web designer and developer who specializes in PHP and AJAX development.Categories
- General (6)
- News (4)
- Projects (11)
- Lock My Stuff (2)
- Noty (1)
- TempServers (8)
- Software (8)
- Tips & Tutorials (46)
Archives
Links
Meta
October 31st, 2009 - 17:12
Thanks, I’m still new to Javascript and jQuery so I was so frustrated with my forms to manually change the values. This snippet is just what I need!