通过自定义属性存储数据实现输入框获得焦点与失去焦点改变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("用户信息提交失败！");

            }

        });

    });

巴特西

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

最新文章

热门文章