jQuery实现输入框提示，当获取焦点时提示消失，当失去焦点时内容为空则显示提示，否则保留输入信息

首先看效果

默认状态下

获取焦点状态下

什么也没输入，离开

有输入离开

输入默认值离开

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //jQuery的页面加载完成时触发的事件
        $(document).ready(function(){
            
            $("input[type='text']").on("blur focus",function(){
                var defaultvalue = $(this).attr("defaultvalue");
                
                //判断是否获取焦点
                if($(this).is(":focus")){
                    //把输入框里面的文字颜色变为黑色
                    $(this).css("color", "#000");
                    //如果之前的内容是默认值，那么清空
                    if($(this).val() == defaultvalue){
                        $(this).val("");
                    }
                }else{//失去焦点
                    //判断内容是空的或默认值
                    if($(this).val() == "" || $(this).val() == defaultvalue){
                        //设置为默认值
                        $(this).val(defaultvalue);
                        //文字颜色设置为灰色
                        $(this).css("color", "#999");
                    }else{
                        //文字设置为黑色
                        $(this).css("color", "#000");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <a href="">刷新</a>
    <input type="text" id="button1" value="请输入账号" defaultvalue="请输入账号" style="color:#999"/>
    <input type="text" id="button2" value="请输入手机号" defaultvalue="请输入手机号" style="color:#999"/>
</body>
</html>

---