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!
And if you haven't already, you should follow me on twitter!
Follow @zackperdue
Pingback: Default Text Field Value without Javascript (placeholder) | Zack Perdue()