当前位置：首页 > 学习笔记 > 正文内容

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

廖万里3年前 (2022-09-09)学习笔记107472

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

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

提示：

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 廖万里 -->
		<!-- 一封云来信：nmx.kkkliao.cn -->
		<!-- 廖万里的博客：www.kkkliao.cn -->
		<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>

本文链接：https://www.kkkliao.cn/?id=18 转载需授权！

分享到：

返回列表

上一篇：js技术调用高德api实现精准定位

下一篇：制作简易留言板html5，使用jquery实现留言以及删除功能

“html5使用表单事件实现用户登录功能 jquery” 的相关文章

全网首发羊了个羊通关方法（推荐技巧四，最简单）

游戏介绍这是啥游戏？据悉，这是一款卡通背景的消除闯关游戏。玩家们需要点击上方卡牌，被选中的卡牌会下移到底部的木框中，框内最多可以储存7张卡牌，当有3张相同的卡牌同置于框内时，则可达成消除。效果截图羊了个羊无限道具版在线体验 --- >>>立即体验...

Python所有的库都在这里了！！强烈建议收藏

前言嗨喽，大家好呀~又到了学Python时刻~随着大数据和人工智能的发展，Python也与多种科技深深绑定。比如自动化测试，运维，爬虫，数据分析，机器学习，金融领域，后端开发，云计算，游戏开发都有涉及。万丈高楼平地起，Python这座大厦能够如此强大，就是拥有强大的成千上万的库的支持无数牛x的轮子在...

MyBatis-写分页的几种方法，怎么写分页最简单

1、就是直接使用我们的SQL语句进行分页，也就是在Mapper里面加上分页的语句就好了。比如MySQL添加一个limit 2,4。这种方式弊端很大，比如我们不用MySQL了，所有的代码都要修改。2、MyBatis中的分页的插件PageHelper，3、自己手写分页框架。这种用的比较少，不是说写不出来...