通过自定义属性存储数据实现输入框获得焦点与失去焦点改变value值

http://gopro.ee.cagoe.com/index.html

html:

<div class="name"><input value="在此输入您的姓名" data-value="在此输入您的姓名" /></div>
<div class="webId"><input value="在此输入您的微博ID" data-value="在此输入您的微博ID" /></div>
<div class="address"><input value="在此输入您的地址" data-value="在此输入您的地址" /></div>
<div class="tel"><input value="在此输入您的电话" data-value="在此输入您的电话" /></div>
<div class="email"><input value="在此输入您的电子邮件" data-value="在此输入您的电子邮件" /></div>

<img src="data:images/load.png" class="msg_text02 CusAnimateDom " data-delay="400" lazypath="images/surplus/msg_text02.png" />
<img src="data:images/load.png" class="submit_btn CusAnimateDom " data-delay="400" lazypath="images/surplus/submit_btn.png" />
<div class="agree_btn selected"></div>
<div class="policy_btn"></div>
<div class="select_box province">
    <div class="selected">请选择省份</div>
            <div class="select_list_box" style="display:none;">
                 <div class="select_list">T时代C5</div>
                 <div class="select_list">T时代C3</div>
                 <div class="select_list">T时代C45</div>
                 <div class="select_list">T时代Ce5</div>
                 <div class="select_list">T时代C5</div>
            </div>
     </div>
 
     <div class="select_box city">
          <div class="selected">请选择城市</div>
             <div class="select_list_box" style="display:none;">
                                <div class="select_list">T时代C5</div>
                                <div class="select_list">T时代C3</div>
                                <div class="select_list">T时代C45</div>
                                <div class="select_list">T时代Ce5</div>
                <div class="select_list">T时代C5</div>
           </div>

</div>

js

//判断自定义select框没有用被勾选
    $(".agree_btn").on("click", function () {
 
        if ($(this).hasClass("selected")) {
            $(this).removeClass("selected");
 
        } else {
            $(this).addClass("selected");
        }
 
    });
    //输入框获得焦点时
    $(".leaveMsg_con input").focus(function () {
        var _dataValue = $(this).attr("data-value");
        var _Value = $(this).val();
        if (_Value == "" || _Value == _dataValue) {
            $(this).val("");
        }
    });
    //输入框失去焦点时
    $(".leaveMsg_con input").blur(function () {
        var _dataValue = $(this).attr("data-value");
        var _Value = $(this).val();
        if (_Value == "" || _Value == _dataValue) {
            $(this).val(_dataValue);
        }
    });
    //提交按钮
    $(".submit_btn").click(function () {
 
        var _checkphone = /^[1][3-8]\d{9}$/;
        var _checkEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        var _param = {
            "name": $(".name input").val(),
            "webId": $(".webId input").val(),
            "province": _province,
            "city": _city,
            "address": $(".address input").val(),
            "phone": $(".tel input").val(),
            "email": $(".email input").val()
 
        }
 
        if (_param.name == "" || _param.name == "在此输入您的姓名") {
            alert("请输入姓名！");
 
            return;
        }
        if (_param.webId == "" || _param.webId == "在此输入您的微博ID") {
            alert("请输入微博ID！");
 
            return;
        }
 
        /***************选择省市开始 ********/
        var _province = $(".province .selected").html();
        var _city = $(".city .selected").html();
 
        if (_province == "请选择省份") {
            alert("请选择省份");
            return;
        }
        if (_city == "请选择城市") {
            alert("请选择城市");
            return;
        }
        /*************** 选择省市结束********/
 
        if (_param.address == "" || _param.address == "在此输入您的地址") {
            alert("请输入您的地址！");
 
            return;
        }
 
        if (_param.phone == "" || _param.phone == "在此输入您的电话")
        {
            alert("请输入手机号码！");
            //$(".alert_not_null_popup").show();
 
            return;
        }
        if (!_checkphone.test(_param.phone))
        {
            alert("手机号码格式不正确！");
            //$(".alert_wrong_popup").show();
 
            return;
        }
 
        if (_param.email == "" || _param.email == "在此输入您的电子邮件") {
            alert("请输入电子邮件！");
 
            return;
        }
        if (!_checkEmail.test(_param.email)) {
            alert("电子邮件格式不正确！");
 
            return;
        }
 
        if (!($(".agree_btn").hasClass("selected"))) {
 
            alert("请勾选同意隐私政策！");
            return;
        }
 
            CmnAjax.PostData("/ajax/Ajax.aspx.cs?method=KeepUserInfo", _param, function (dat) {
            if (dat.IsSuccess == "1") {
 
                //提交成功
                AnimateFrame.SlideTo("thankPage");
 
                setTimeout(function () {
                    $("input").val("");
                }, 3000);
 
                //提交成功之后添加检测
 
            }
            else if (dat.IsSuccess == "2") {
            //输入的号码已存在
                $(".alert_alread_popup").show();
            }else {
                  alert("用户信息提交失败！");
            }
 
        });
 
    });