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

最新推荐文章于 2024-03-01 10:56:38 发布

sgx425021234

最新推荐文章于 2024-03-01 10:56:38 发布

阅读量8.9k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/sgx425021234/article/details/8694027

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果图如下：

源码如下：

<!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>