未输入时为灰色提示,有输入时,文字显示红色。
<!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>