jQuery – Helpful Default Input Values

I’ve recently wanted to try and use some different code to add some default values to my input fields, especially the search box.  Most code I’ve seen does some type of a label overlay which involved a lot of freaking code.  I finally found some code and did a little tweaking to it to fit my situation.  You can also find it under my Snipplr code.

$(function(){
$('input[type="text"]').each(function(){
if(this.value==''){this.value='Enter Value'}
});
$('input[type="text"]').focus(function(){
if(this.value=='Enter Value'){this.value=''}
});
$('input[type="text"]').blur(function(){
if(this.value==''){this.value='Enter Value'}
});
});

The first part of the code identifies that if the value of the input field is empty add ‘Enter Value’. The second part of the code removes the value ‘Enter Value’ from input fields as it gains focus. The last part of the code adds ‘Enter Value’ to empty fields as they lose focus. This code may not work in every situation, but it can help in some situations. Let me know how it works and if you found other modifications of the code that work even better. This is a dependent on jQuery but I’m sure you may find a version that can adapt to other libraries or straight JavaScript.

About Brandon Buttars