自定义键盘及数据交互

来源：互联网发布：甲骨文广播铃声软件编辑：程序博客网时间：2024/06/06 21:04

<div class="condition">    <span>手&nbsp;&nbsp;&nbsp;&nbsp;机</span>    <input id="name" class="common input" name="username" onfocus="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" onfocus="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" onclick="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())*/}

阅读全文

1 0