jQuery+HTML5+CSS3实现的文本框效果

html结构

<form class="form">
	<p><input type="text" placeholder="Your name please"></p>
	<p><input type="text" placeholder="Enter your email"></p>
	<p><input type="search" placeholder="Search"></p>
	<p><textarea placeholder="Write your comments here"></textarea></p>
</form>

导入js代码文件

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});

}

});
</script>