文本框的应用--获得焦点和失去焦点

<html>
<head>
<style type="text/css">
	.focus{
		border:1px solid #f00;
		background:#fcc;
	}
</style>
<script src="jquery-1.11.2.js"></script>
<script>
	$(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><br/>
			<div>
				<label for="pass">密码:</label>
				<input id="pass" type="password">
			</div><br/>
			<div>
				<label for="msg">详细信息:</label>
				<textarea id="msg"></textarea>
			</div>
		</fieldset>
	</form>
</body>
</html>

浏览器都兼容。

input:focus, textarea:focus{

border:1px solid #f00;

background:#fcc;

}以上的写法,IE6不支持。


你可能感兴趣的:(focus,blur, )