未输入时为灰色提示，有输入时，文字显示红色。
<!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" onfocus="myfocus()" onblur="myblur()" />
</body>
</html>