How to hide and show or toggle the default value of input fields using Jquery

Guys jQuery is awesome library for client end works.
This simple script is allows to hide and show or toggle the default value of input fields.
I used this for my some of the works it is so useful.

Try it..!!!

<!DOCTYPE html5>
<head>
<title>Jquery Togle text in text box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var originalValues = new Array();
$("input").focus(function() {
if (!originalValues[this.id]) {
originalValues[this.id] = $(this).val()
}
if ( $(this).val()==originalValues[this.id]) {
$(this).val('');
}
});
$("input").blur(function() {
if ( $(this).attr("value")=="") {
$(this).val(originalValues[this.id]);
}
});
});
</script>
</head>
<body>
<input name="" type="text" value="Change me.!">
</body>
</html>

Happy Coding
Cheers

About Umanda Jayobandara (උමන්ද ජයෝබණ්ඩාර)

I am a Software Engineer in Sri Lanaka. Please visit my web site for more info http://umandajayobandara.com/
This entry was posted in Jquery. Bookmark the permalink.

Leave a comment