用jquery实现html5的placeholder功能

html5的placeholder功能在表单中经常用到，它主要用来提示用户输入信息，当用户点击该输入框之后，提示文字会自动消失。

我们用jquery实现类似的功能：

当输入框获得焦点时，清空输入框中的提示文字。

当输入框失去焦点时，若输入框中的数据为空，则再次出现提示文体。

效果图：

talk is cheap , show you code:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery test</title>

<script src="jquery-1.11.1.min.js"></script>

<style type="text/css">

	input

	{

		margin-top:50px;

		margin-left:100px;

		color: gray;

	}

</style>

</head>

<body>

<div><input type="text" id="username" value="用户名"></div>

<div><input type="text" id="email" value="邮箱"></div>

</body>

<script type="text/javascript">

	$("input").click(function(){

		$(this).val("");

	});

	$("input").blur(function(){

		if($(this).val() == ""){

			$(this).val(this.defaultValue);

		}

	})

</script>

</html>

说明：this.defaultValue指的是该标签原始的value值

巴特西

用jquery实现html5的placeholder功能

最新文章

热门文章