用户名灰色提示

最新推荐文章于 2021-03-25 11:12:52 发布

Q_004

最新推荐文章于 2021-03-25 11:12:52 发布

阅读量450

点赞数

分类专栏： jq 文章标签：用户名灰色提示

本文链接：https://blog.csdn.net/q_004/article/details/78438118

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

未输入时为灰色提示，有输入时，文字显示红色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户名提示</title>
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
		<style type="text/css">
			.usernameclass1{
				color: gray;
			}
			.usernameclass2{
				color: red;
			}
		</style>
		<script type="text/javascript">
			function myfocus(){
				//聚焦时，如果值是"请输入...",先把值变为空，去掉灰色样式，添加红色样式
				if($("#username").val()=="请输入用户名/手机号"){
					$("#username").val("");
					$("#username").removeClass("usernameclass1")
					$("#username").addClass("usernameclass2")
				}
				
			}
			function myblur(){
				//失去焦点时，如果值为空，即没有输入内容，先把值设为"请输入...",
				//去掉样式2，添加样式1
				if($("#username").val()=="")
				{
					$("#username").val("请输入用户名/手机号");
					$("#username").removeClass("usernameclass2");
					$("#username").addClass("usernameclass1");
				}
				
			}
		</script>
	</head>
	<body>
		用户名：<input id="username" value="请输入用户名/手机号" class="usernameclass1" οnfοcus="myfocus()" οnblur="myblur()" />
	</body>
</html>

Q_004

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用户名灰色提示

未输入时为灰色提示，有输入时，文字显示红色。用户名提示 .usernameclass1{ color: gray; } .usernameclass2{ color: red; } function myfocus(){ //聚焦时，如果值是"请输入...",先把值变为空，去掉灰色样式，添加红色样式
复制链接

扫一扫