题：使用表单事件实现用户登录功能 jquery

使用表单事件实现用户登录功能当用户名文本框获得焦点时，清空文本框内容，当用户名文本框失去焦点时，如果文本框内容为空，则恢复显示“请输入用户名〞。提交表单时，弹出提示框提示 “登录成功！〞提示：使用focus(、blur0.submito方法实现代码（自己引入jquery.js）：......

kkkliaoo

484人浏览 · 2022-06-20 11:16:05

kkkliaoo · 2022-06-20 11:16:05 发布

使用表单事件实现用户登录功能

当用户名文本框获得焦点时，清空文本框内容
•当用户名文本框失去焦点时，如果文本框内容为空，则恢复显示“请
输入用户名〞
•提交表单时，弹出提示框提示 “登录成功！〞

提示：

使用focus(、
blur0.
submito方法实现

代码（自己引入jquery.js）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 廖万里 -->
		<!-- 一封云来信：Message.kkkliao.com -->
		<!-- 万策云科技：www.kkkliao.com -->
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#my{
				padding: 10px;
				text-align: left;
			}
		</style>
	</head>
	<body>
		<form id="my">
			<h2>登录</h2><br>
			用户名：<input id="my_name" type="text" value="请输入用户名" /><br>
			密&nbsp;码：<input type="text" /><br>
			<input id="aaa" type="submit" />
		</form>
	</body>
	<script type="text/javascript">
		$("#my").css("width","300px");
		$("#my").css("border","1px solid black");
		$("#my").css("height","150px");
		// 获取焦点
		$("#my_name").focus(function(){
			$("#my_name").val("");
		});
		// 失去焦点
		$("#my_name").blur(function(){
			$("#my_name").val("请输入用户名");
		});
		$("#aaa").click(function(){
			alert("登录成功！");
		});
	</script>
</html>