Hide Form Input Values On Focus With jQuery

This is a simple and light weight JavaScript snippet using jQuery to hide any text input’s value when you give that field focus and then replace the value if it has not been changed when you click off of it. I wrote this today because I was being lazy when a client asked if they could have the aforementioned functionality. So instead of taking the time to search Google I decided to write this little bit of code myself. It took all of 1 minute.

As is, it works with every text input field on the page but can be customized very easily… heck it can even be made into a plugin, which I may do in the future. For now, here it is.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	$('input:text').each(function(){
		var txtval = $(this).val();
		$(this).focus(function(){
			$(this).val('')
		});
		$(this).blur(function(){
			if($(this).val() == ""){
				$(this).val(txtval);
			}
		});
	});
});

Let me know what you think. It would also be nice to see any plugins you guys have came up with that are similar to this… Happy Coding!