JQ 文本框得到失去焦点

onestopweb

浏览: 686244 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

阅-JQ3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
	font: normal 12px/17px Arial;
}
div {
	padding: 2px;
}
input, textarea {
	width: 12em;
	border: 1px solid #888;
}
.focus {
	border: 1px solid #f00;
	background: #fcc;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$(":input").focus(function(){
		$(this).addClass("focus");
	}).blur(function(){
		$(this).removeClass("focus");
	});
})
</script>
</head>
<body>
<form action="" method="post" id="regForm">
    <fieldset>
        <legend>个人基本信息</legend>
        <div>
            <label  for="username">名称:</label>
            <input id="username" type="text" />
        </div>
        <div>
            <label for="pass">密码:</label>
            <input id="pass" type="password" />
        </div>
        <div>
            <label for="msg">详细信息:</label>
            <textarea id="msg" rows="2" cols="20"></textarea>
        </div>
    </fieldset>
</form>
</body>
</html>

效果图：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
	font: normal 12px/17px Arial;
}
div {
	padding: 2px;
}
input, textarea {
	width: 12em;
	border: 1px solid #888;
}
.focus {
	border: 1px solid #f00;
	background: #fcc;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(":input").focus(function(){
		$(this).addClass("focus");
		if($(this).val() ==this.defaultValue){  
			$(this).val("");           
		} 
	}).blur(function(){
	$(this).removeClass("focus");
		if ($(this).val() == '') {
			$(this).val(this.defaultValue);
		}
	});
})
</script>
</head>
<body>
<form action="" method="post" id="regForm">
    <fieldset>
        <legend>个人基本信息</legend>
        <div>
            <label  for="username">名称:</label>
            <input id="username" type="text" value="名称" />
        </div>
        <div>
            <label for="pass">密码:</label>
            <input id="pass" type="password" value="密码" />
        </div>
        <div>
            <label for="msg">详细信息:</label>
            <textarea id="msg" rows="2" cols="20">详细信息</textarea>
        </div>
    </fieldset>
</form>
</body>
</html>

效果图：