loading
Please wait while loading...
Back A better way to support placeholder in IE

Using a float span as the placeholder message instead change the value of the input

Firstly, make the form input as following style

<label><input type="text" placeholder="email" /></label>
 


 

We will add a span after the input, the input will become following

<label><input type="text" placeholder="email" /><span>email</span></label>

Than we need to set a css style to the span to make it float on the input:

label { position: relative; }
label span { position: absolute; left: 0; top: 0; }

If you have set some padding on the label or the input, you should use top and left position to tune the span to show it on the right position

Finally, add the following jQuery script inside your html

$(document).ready(function() {
	if($.browser.msie && $.browser.version<=9) {
		$("[placeholder]").each(function() {
			$placeholder = $(this).attr('placeholder');
			$(this).after(''+$placeholder+'');
			$(this).focus(function() { $(this).next('span').hide(); });
			$(this).blur(function() {
				if($(this).val().length>0) {
					$(this).next('span').hide();
				} else {
					$(this).next('span').show();
				}
			});
		});
	}
});

 

Comments
comments powered by Disqus