jQuery-HTML5-CSS3实现的文本框代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery-HTML5-CSS3实现的文本框代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Placeholder文本框</title>
<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>

<style>
body {
	font: 90%/150% Arial, Helvetica, sans-serif;
	color: #666;
	width: 700px;
	margin: 30px auto;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #F60;
}
p {
	margin: 0 0 2em;
}
h1, h2, h3 {
	line-height: 110%;
}
h1 {
	font: bold 80% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 2px;
	color: #999;
}
h2 {
	margin: 0 0 8px;
}
h3 {
	border-top: solid 2px #ccc;
	margin: 40px 0 15px;
	padding-top: 10px;
}
.credits {
	color: #999;
	font: italic 90% "Times New Roman", Times, serif;
}
.credits a {
	color: #666;
}

form p {
	margin: 0 0 15px;
}

/************************************************************************************
FORM STYLE BEGIN
*************************************************************************************/

/* input styles */
input, 
textarea, 
input[type=search] {
	background: #f4f4f4;
	border: solid 1px #a3a3a3;
	padding: 5px 10px;
	font: 15px "Times New Roman", Times, serif;
	-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance: none; /* reset webkit search style */
}

/* input:focus styles */
input[type=text]:focus, 
textarea:focus,
input[type=search]:focus {
	background: #fff;
	border-color: #333;
	outline: none; /* remove outline */
}

/* set field width */
input[type=text], input[type="search"] {
	width: 200px;
}
textarea {
	width: 400px;
	height: 250px;
}

/* fallback placeholder */
.placeholder {
	color: #bbb;
}
/* webkit placeholder */
::-webkit-input-placeholder {
	color: #bbb;
}
/* moz placeholder */
:-moz-placeholder {
	color: #bbb;
}

/* remove webkit search input decoration and cancel button */
input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

</style>

</head>

<body>

<h1>Demo</h1>
<h2><a href="#">Cross-Browser HTML5 Placeholder Text</a></h2>

<h3>Placeholder text with jQuery</h3>
<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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)