`
mywebcode
  • 浏览: 988357 次
文章分类
社区版块
存档分类
最新评论

jQuery(3)--实现注册表单中当用户名为空时,实现输入框边框变色

 
阅读更多

效果图如下:

源码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>demo05.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript" src="../js/jquery-1.9.1.js">
</script>
		<script type="text/javascript">

$(document).ready(function() {

   //:input 获取的是 type=text,radio,button等select textarea等元素对象
	$(":input").blur(function() { //注册blur的事件
		$(this).each(function() { //遍历input元素对象 
				if ("" == $(this).val()) { //判断元素对象的value值
					$(this).addClass("blur"); //添加css样式
				}else{
				    $(this).removeClass("blur");
				}
			});
	});

});
</script>

		<style type="text/css">
.blur {
	border: 1px solid red;
}
</style>
	</head>

	<body>
		<form action="">

			用户名:
			<input type="text" name="uname" />
			<br />
			密码:
			<input type="password" name="uname" />
			<br />
			邮箱:
			<input type="text" name="uname" />
			<br />
			个人介绍:
			<textarea rows="10" cols="30"></textarea>
		</form>

	</body>
</html>


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics