Hide Form Input Values On Focus With jQuery

Posted on

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!

  • Vigoncas

    Thanks for this snippet. I used it with text and password fields.

  • http://twitter.com/zackperdue Zack Perdue

    Great! Glad to hear you find it useful.

  • Karl Ringrose

    Hey man just thought you might like to check out the .defaultValue javascript code as it may make this less taxing on the browser.

    http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

  • Pingback: Default Text Field Value without Javascript (placeholder) | Zack Perdue

  • Nazmul H. Palash

    In the input attibute, enter:

    That should work on Email input :)

    • http://zackperdue.com/ Zack Perdue

      The objective here is to be unobtrusive, so we wouldn’t prefer this implementation. However, you can always add to the script above. If you see on line 2, where we target the text field, we can add another field no problem. $(‘input:text, input[type=”email”]’). If you see we added input[type=”email”].
      Hope this helps. :)

      • Nazmul H. Palash

        Yup! Got it! Thanks