Learn and share. The simplest harmony.

 

Mask Your Input Forms and Make It Beauty

Posted on March 11, 2010 and got 13 shouts so far

Text masking is an alternative for us to display information what type of content user must input to our forms, as usual jQuery make our life easier, to implement that we just need to create the script that read user actions (focusing or bluring the input), read its value then decide to empty the input value or refill with its default value.

 
$('input').focus(function() {

	if($(this).val() == "Enter your email here")
		$(this).val('');

}).blur(function() {

	if($(this).val() == "")
		$(this).val('Enter your email here');

});

To plain? Don’t worry we can manipulate them with animation, so if the user give a focus on the input we’ll fading out the text mask and vice versa. To implement that, we must add a label element before the input element and make its position to absolute. Take a look at following script :

HTML

CSS

.username-label, .password-label {
	position: absolute;
	margin: 9px 9px 9px 12px;
}

JavaScript

$('.username-label, .password-label').animate({ opacity: "0.4" })
	.click(function() {
		var thisFor	= $(this).attr('for');
		$('.'+thisFor).focus();
});

$('.username').focus(function() {

	$('.username-label').animate({ opacity: "0" }, "fast");

		if($(this).val() == "username")
			$(this).val() == "";

	}).blur(function() {

		if($(this).val() == "") {
			$(this).val() == "username";
			$('.username-label').animate({ opacity: "0.4" }, "fast");
		}
	});

$('.password').focus(function() {

	$('.password-label').animate({ opacity: "0" }, "fast");

		if($(this).val() == "password") {
			$(this).val() == "";
		}
	}).blur(function() {

		if($(this).val() == "") {
			$(this).val() == "password";
			$('.password-label').animate({ opacity: "0.4" }, "fast");
		}
});

If we can use fade in or fade out animation, then we can play with another animation such as slide to the left or right, once again it’s based on our need. Ok, that’s it, if you’ve another style for input masking you can share them in the shout box bellow, thank you for reading ;) .
You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated ;)

 

This Post Tags :

Bookmark Post :

Pin It
  • Your site is really great. Just discovered. Been reading up all the post. Good Luck.

  • @Kawsar Ali : It’s a pleasure to hear that and knowing my posts are usefull, thank you!

  • Good Job

    collect it to http://ajax.wespai.com

  • I love it, I have been seeing and trying to achieve the like of this, not until I saw it on your blog the goose chase would still be on.

    Can I use the source code for my project? Please reply my question using the email I droped above.

    Thanks.

  • Are the lables hidden when there INPUT field had a value?

  • @Jim : Yes of course, except for the example #3 (Sliding), the labels will positioned on the right side of the input.

  • @Hidayat : I tried it with example 3 but it didn’t work.

  • @Jim : What’s the problem, can you put the link or problem description?

  • Hi Hidayat,
    I can’t give you a like as it’s on an intranet. However, you can seen an example here:

    http://i45.tinypic.com/27y6c7d.png

    The Grey text that reads “Label Name” is the label, and the “xxx” text is the value of the input field.

  • Where in your code does it actually detect the existence of a value in the input field that is pre-populated from the server?

  • @Jim : I see, if the value has exists (pre-populated from the server for example) you can make it auto focus :

    if($(‘.username-sliding’).val() != “”) {
    $(‘.username-sliding’).focus();
    }

  • WOw this is really cool. I might implement it on my site if I get to figure out how.

  • Thanks a lot for the share. Great help! :)