自定义键盘及数据交互

最新推荐文章于 2024-09-14 08:25:12 发布

codefarmerfour

最新推荐文章于 2024-09-14 08:25:12 发布

阅读量245

点赞数 1

文章标签：数据

本文链接：https://blog.csdn.net/codefarmerfour/article/details/76353761

版权

<div class="condition">
    <span>手&nbsp;&nbsp;&nbsp;&nbsp;机</span>
    <input id="name" class="common input" name="username" οnfοcus="xfjianpan(this.id)" type="text"
           placeholder="手机号码" value="">
</div>
<div class="condition">
    <span>证&nbsp;&nbsp;&nbsp;&nbsp;件</span>
    <input id="password" class="common input psw-height" name="userpass" οnfοcus="xfjianpan(this.id)"
           type="text" placeholder="身份证号码" value="">
</div>

<div id="jianpan">
    <div class="jianpan_left">
        <ul>
            <li>q</li>
            <li>w</li>
            <li>e</li>
            <li>r</li>
            <li>t</li>
            <li>y</li>
            <li>u</li>
            <li>i</li>
            <li>o</li>
            <li>p</li>
            <!--  <li style="margin-left:22px;">7</li>
              <li>8</li>
              <li>9</li>
              <li style="height:150px;"></li>-->
            <div class="clear"></div>
        </ul>
        <ul>
            <li style="margin-left:40px;">a</li>
            <li>s</li>
            <li>d</li>
            <li>f</li>
            <li>g</li>
            <li>h</li>
            <li>j</li>
            <li>k</li>
            <li>l</li>
            <div class="clear"></div>
        </ul>
        <ul>
            <li id="shift" style="margin-left:80px;">大写</li>
            <li>z</li>
            <li>x</li>
            <li>c</li>
            <li>v</li>
            <li>b</li>
            <li>n</li>
            <li>m</li>
            <div class="clear"></div>
        </ul>
    </div>
    <div class="jianpan_right">
        <div class="right_left">
            <ul>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <ul>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div class="right_right">
            <ul>
                <li class="reback">×</li>
                <li>0</li>
            </ul>

        </div>
        <div class="clear"></div>

    </div>
    <div class="clear"></div>
    <div class="clear"></div>
    <div class="dele_cancel">
        <li class="uncover delete">清除</li>
        <div class="uncover cancel" οnclick="search()">查询</div>
        <div class="clear"></div>
    </div>
</div>

js部分

function xfjianpan(id) {
    var jpnub = $(".jianpan_left li").length;
    $("#jianpan li").unbind("click");
    if (id != false) {
        var xfjp_text = $("#" + id).val();
        $(".input_on").removeClass("input_on");
        $("#" + id).addClass("input_on");
        $("#jianpan li").click(function () {
            var click = $(this).html();
            if (click == "大写") {
                for (i = 0; i < jpnub; i++) {
                    $(".jianpan_left li:eq(" + i + ")").html($(".jianpan_left li:eq(" + i + ")").html().toUpperCase());
                }
                $("#shift").html("小写");
                return
            } else if (click == "小写") {
                for (i = 0; i < jpnub; i++) {
                    $(".jianpan_left li:eq(" + i + ")").html($(".jianpan_left li:eq(" + i + ")").html().toLowerCase());
                }
                $("#shift").html("大写");
                return
            }
            if (click == "清除") {
                xfjp_text = "";
                $("#" + id).val(xfjp_text);
                return;
            }
            if (click == "×") {
                var a = $("#" + id).val();
                var b = a.slice(0, -1);
                xfjp_text = b;
                $("#" + id).val(xfjp_text);
                $("#" + id).focus();
                return
            }
            else {
                xfjp_text = xfjp_text + click;
                $("#" + id).val(xfjp_text);
                /*  alert(id)*/
                /*    if (id == "password") {
                 if ($("#name").val() == "") {
                 alert("手机号不能为空");
                 xfjp_text = "";
                 $("#" + id).val(xfjp_text);
                 return;
                 } else {

                 }
                 }*/

            }
            $("#" + id).focus();

        })
    } else {
        $(".input_on").removeClass("input_on");                    //移除选中input的选中样式
        /*    $("#jianpan").hide();*/
    }


}
数据部分
function search() {
    var photo = ($("#name").val());
    var a=$("#name").val()
    var identity = ($("#password").val());
    var b=$("#password").val()
    /*  var telephone = $("#telephone").val();*/
    /* /!*手机号验证*!/
     telephone = telephone.replace(/\ +/g, ""); //去掉空格
     telephone = telephone.replace(/[ ]/g, "");    //去掉空格
     telephone = telephone.replace(/[\r\n]/g, ""); //去掉回车换行
     if(telephone.length!=11){
     alert('请输入有效的手机号码！');
     $("#name").focus();
     return false;
     }
     var myreg = /^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
     if(!myreg.test(telephone))
     {
     alert('请输入有效的手机号码！');
     $("#name").focus();
     return false;
     }*/
    identity = identity.replace(/\ +/g, "");
    identity = identity.replace(/[ ]/g, "");
    identity = identity.replace(/[\r\n]/g, "");
    if (identity.length != 18 && identity.length != 15) {
        alert("身份证号码位数不对");
        $("#password").focus();
        return false
    }
    var reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
    if (!reg.test(identity)) {
        alert("请输入正确的身份证号")
    } else {
        var host = "http://xgxt.zhumei.net/index.php?g=Nm&m=MerchantScreenTouchQyxg&a=get_repertory";
        $.ajax({
            type: 'POST',
            /* data: {"photo": photo, "identity": identity},*/
            /*      url: host+'&photo=13777695406&identity=332525197506226117',*/
            url: host + "&photo=" + photo + "&identity=" + identity,
            /*    data: {"telephone": telephone, "identity": identity},*/
            dataType: "jsonp",
            jsonp: "callback",
            callback: "jsonp",
            success: function (data) {
                console.log(data);
                stock(data);
                $("#name").val("");
                $("#password").val("");
                /*      $(".wai_data").find("img").hide();*/
                  /*   window.location.href="skip_detail.html"*/
            },
            error: function (data) {

                console.log(data);
                if (data.readyState == 4) {
                    alert("输入信息错误")
                }
            }

        });
        function stock(data) {
            $(".box").hide();
            $(".wrapper").show();
            $(".name_merchant").html(data[1].f_sjname);
            $(".telephone_merchant").html(data[1].f_photo);
            $("#name").val()=="";
            $("#password").val()=='';
            var str = "";

            for (i in data[0]) {
                if (data[0][i].onsale == null) {
                    data[0][i].onsale = "下架"
                }
                str += "<ul class='data_body'><li class='number_one'>" + data[0][i].f_no + " </li><li>" + data[0][i].f_stat + "</li><li>" + data[0][i].f_bgtype + "</li><li>" + data[0][i].f_name + "</li><li>" + data[0][i].f_count + "</li><li>" + data[0][i].f_jycount + "</li><li>" + data[0][i].f_xh + "</li><li>" + data[0][i].f_price + "</li><li>" + data[0][i].f_fl + "</li><li>" + data[0][i].f_dw + "</li><li>" + data[0][i].f_fl + "</li><li>" + data[0][i].f_where + "</li><li>" + data[0][i].onsale + "</li><div class='clear'></div> </ul>"
            }
            $(".wai_data").html(str);
            if($(".data_body").length < 1){
                $(".wai_data").append("<img src='./img/loading.gif' alt=''>")
            }
        }
    }


    /* alert($("#name").val());
     alert($("#password").val())*/

}