jQuery移动端手机键盘输入车牌号代码【附加新能源车牌】

最近在移动应用中要做到一个录取汽车牌号码的功能，在网上找了一个插件后发现没有增加新能源车牌功能，

和同事研究了一下，将其进行改造完美的实现了这个功能，这里放出该插件的源码；

原插件来自A5源码网【http://down.admin5.com/texiao/138473.html】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>车牌键盘</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
    *{    margin: 0; padding: 0;list-style:none;border:0; box-sizing:border-box;}
    body{ background-color:#BAFE90;}
.clearfix:after { content: "."; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-table;}
*html .clearfix { height: 1%; }
.clearfix { display: block; }
*+html .clearfix { min-height: 1%; }
    .che_tit{ text-align:center; padding:20px;}
    .ul_pro{ background-color:#CED3D9; text-align:center; padding:4px 2px; font-size:14px;}
    .ul_pro li{ float:left; width:11.11%; padding:2px;box-sizing: border-box;}
    .ul_pro .li_close{  float:right; width:22.22%;}
    .ul_pro .li_close span{ background-color:#ACB3BB;}
    .ul_pro .li_clean{  float:right; width:22.22%;}
    .ul_pro li span{ display:block; background-color:#fff; border-radius:4px; box-shadow: 2px 2px 2px #888888; /* max-width:48px; margin:0 auto; */ line-height:32px; padding-top:2px;  }
.ul_pro li span:active{ background-color:#4DA9F2; color:#fff;}

.ul_input{ padding:20px;width:350px; margin:0 auto; }
.ul_input li{ float:left; width:14%; padding:2px;text-align:center; }
.ul_input li span{ display:block; background-color:#fff; border:1px solid #ccc; border-radius:4px; width:40px; margin:0 auto; height:40px; line-height:40px; }

.ul_keybord{ background-color:#CED3D9; text-align:center; padding:4px 2px; font-size:14px;}
.ul_keybord li{ float:left; width:10%; padding:2px;box-sizing: border-box;}
.ul_keybord .ikey20{ margin-left:5%;}
.ul_keybord .li_w{ width:11.11%; }

.ul_keybord .li_close{  float:right; width:22.22%;}
.ul_keybord .li_close span{ background-color:#ACB3BB;}
.ul_keybord .li_clean{  float:right; width:22.22%;}
.ul_keybord li span{ display:block; background-color:#fff; border-radius:4px; box-shadow: 2px 2px 2px #888888; /* max-width:48px; margin:0 auto; */ line-height:32px; padding-top:2px;  }
.ul_keybord li span:active{ background-color:#4DA9F2; color:#fff;}

    </style>
</head>
<body>

    <div class="">

        <div class="che_tit">输入车牌</div>
        <div class="car_input">
            <ul class="clearfix ul_input"><li class="input_pro"><span></span></li><li class="input_pp input_zim"><span></span></li><li class="input_pp"><span></span></li><li class="input_pp"><span></span></li><li class="input_pp"><span></span></li><li class="input_pp"><span></span></li><li class="input_pp"><span></span></li></ul>
        </div>

        </div>

    <div id="jp_pro"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="layer_mobile/layer.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<script type="text/javascript">
/*

*/
</script>
<div style="text-align:center;">
<p>更多源码：<a href="http://down.admin5.com/" target="_blank">A5源码</a></p>
</div>
</body>
</html>

HTML

var provinces = new Array("京","沪","浙","苏","粤","鲁","晋","冀",
            "豫","川","渝","辽","吉","黑","皖","鄂",
            "津","贵","云","桂","琼","青","新","藏",
            "蒙","宁","甘","陕","闽","赣","湘");

var keyNums = new Array("0","1","2","3","4","5","6","7","8","9",
            "Q","W","E","R","T","Y","U","I","O","P",
            "A","S","D","F","G","H","J","K","L",
            "OK","Z","X","C","V","B","N","M","Del");
var next=0;
    function showProvince(){
            $("#pro").html("");
            var ss="";
            for(var i=0;i<provinces.length;i++){
                ss=ss+addKeyProvince(i)
            }
            $("#pro").html("<ul class=‘clearfix ul_pro‘>"+ss+"<li class=‘li_close‘ onclick=‘closePro();‘><span>关闭</span></li><li class=‘li_clean‘ onclick=‘cleanPro();‘><span>清空</span></li></ul>");
    }
    function showKeybord(){
            $("#pro").html("");
            var sss="";
            for(var i=0;i<keyNums.length;i++){
                sss=sss+‘<li class="ikey ikey‘+i+‘ ‘+(i>9?"li_zm":"li_num")+‘ ‘+(i>28?"li_w":"")+‘" ><span onclick="choosekey(this,‘+i+‘);">‘+keyNums[i]+‘</span></li>‘
            }
            $("#pro").html("<ul class=‘clearfix ul_keybord‘>"+sss+"</ul>");
    }
    function addKeyProvince(provinceIds){
        var addHtml = ‘<li>‘;
            addHtml += ‘<span onclick="chooseProvince(this);">‘+provinces[provinceIds]+‘</span>‘;
            addHtml += ‘</li>‘;
            return addHtml;
    }

    function chooseProvince(obj){
       $(".input_pro span").text($(obj).text());
       $(".input_pro").addClass("hasPro");
       $(".input_pp").find("span").text("");
       $(".ppHas").removeClass("ppHas");
       next=0;
       showKeybord();
    }    

    function choosekey(obj,jj){
        if(jj==29){
            alert("车牌："+$(".car_input").attr("data-pai"));
            layer.closeAll();
        }else if(jj==37){
            if($(".ppHas").length==0){
                $(".hasPro").find("span").text("");
                $(".hasPro").removeClass("hasPro");
                showProvince();
                next=0;
            }
            $(".ppHas:last").find("span").text("");
            $(".ppHas:last").removeClass("ppHas");
            next=next-1;
            if(next<1){
                next=0;
            }
            console.log(next);
        }else{
            if(next>5){
                return
            }
            console.log(next);
            for(var i = 0; i<$(".input_pp").length;i++){
                if(next==0 & jj<10 & $(".input_pp:eq("+next+")").hasClass("input_zim")){
                    layer.open({
                        content: ‘车牌第二位为字母‘,
                        skin: ‘msg‘,
                        time: 1
                    });
                    return
                }
                $(".input_pp:eq("+next+")").find("span").text($(obj).text());
                $(".input_pp:eq("+next+")").addClass("ppHas");
                next=next+1;
                if(next>5){
                    next=6;
                }
                getpai();
                return
            }

        }

    }
    function closePro(){
       layer.closeAll()
    }
    function cleanPro(){
       $(".ul_input").find("span").text("");
       $(".hasPro").removeClass("hasPro");
       $(".ppHas").removeClass("ppHas");
       next=0;
    }
    function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
    function getpai(){
        var pai=trimStr($(".car_input").text());
        $(".car_input").attr("data-pai",pai);
    }
window.onload = function() {

    $(".input_pro").click(function(){
         layer.open({
            type: 1
            ,content: ‘<div id="pro"></div>‘
            ,anim: ‘up‘
            ,shade :false
            ,style: ‘position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:0; border:none;‘
          });
         showProvince()
    })
    $(".input_pp").click(function(){
         if($(".input_pro").hasClass("hasPro")){ // 如果已选择省份
             layer.open({
                type: 1
                ,content: ‘<div id="pro"></div>‘
                ,anim: ‘up‘
                ,shade :false
                ,style: ‘position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:0; border:none;‘
              });
             showKeybord()
         }else{
             $(".input_pro").click()
         }
    })

}

JS

弹窗使用的是layer mobile【http://layer.layui.com/mobile/】

改造后的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>车牌键盘</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
    *{    margin: 0; padding: 0;list-style:none;border:0; box-sizing:border-box;}
    body{ background-color:#BAFE90;}
.clearfix:after { content: "."; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-table;}
*html .clearfix { height: 1%; }
.clearfix { display: block; }
*+html .clearfix { min-height: 1%; }
    .che_tit{ text-align:center; padding:20px;}
    .ul_pro{ background-color:#CED3D9; text-align:center; padding:4px 2px; font-size:14px;}
    .ul_pro li{ float:left; width:11.11%; padding:2px;box-sizing: border-box;}
    .ul_pro .li_close{  float:right; width:22.22%;}
    .ul_pro .li_close span{ background-color:#ACB3BB;}
    .ul_pro .li_clean{  float:right; width:22.22%;}
    .ul_pro li span{ display:block; background-color:#fff; border-radius:4px; box-shadow: 2px 2px 2px #888888; /* max-width:48px; margin:0 auto; */ line-height:32px; padding-top:2px;  }
.ul_pro li span:active{ background-color:#4DA9F2; color:#fff;}

.ul_input{ padding:0; margin:0 auto;text-align:center; }
.ul_input li{ display:inline-block; width:42px;height:42px; text-align:center;vertical-align: middle;}
.ul_input li span{ display:block; background-color:#fff; border:1px solid #ccc; border-radius:4px; width:40px; margin:0 auto; height:40px; line-height:40px; }

.ul_keybord{ background-color:#CED3D9; text-align:center; padding:4px 2px; font-size:14px;}
.ul_keybord li{ float:left; width:10%; padding:2px;box-sizing: border-box;}
.ul_keybord .ikey20{ margin-left:5%;}
.ul_keybord .li_w{ width:11.11%; }

.ul_keybord .li_close{  float:right; width:22.22%;}
.ul_keybord .li_close span{ background-color:#ACB3BB;}
.ul_keybord .li_clean{  float:right; width:22.22%;}
.ul_keybord li span{ display:block; background-color:#fff; border-radius:4px; box-shadow: 2px 2px 2px #888888; /* max-width:48px; margin:0 auto; */ line-height:32px; padding-top:2px;  }
.ul_keybord li span:active{ background-color:#4DA9F2; color:#fff;}

    </style>
</head>
<body>

    <div class="">

        <div class="che_tit">输入车牌</div>
        <div class="car_input">
            <ul class="clearfix ul_input">
            <li class="input_pro"><span></span></li>
            <li class="input_pp input_zim"><span></span></li>
            <li class="input_pp"><span></span></li>
            <li class="input_pp"><span></span></li>
            <li class="input_pp"><span></span></li>
            <li class="input_pp"><span></span></li>
            <li class="input_pp"><span></span></li>

            </ul>
        </div>

        </div>
    <div class="ck"><input type="checkbox">新能源车</div>
    <div id="jp_pro"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="layer_mobile/layer.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("input[type=checkbox]").click(function(){
        var str = ‘<li class="input_pp last_pp"><span></span></li>‘;
        var liNum = $(".ul_input").find("span").text().length-1;
        if($(this).is(":checked")){

            $("#cb1").attr("checked",false);
            $(".ul_input").append(str);

            next = liNum;
        }else{

            $("#cb1").attr("checked",true);
            $(".ul_input").find(".last_pp").remove();

            var pai = $(".car_input").attr("data-pai");
            pai=pai.replace(/(^\s*)|(\s*$)/g,"");
            console.log(liNum);
            if(liNum>6){

                pai=pai.substring(0,pai.length-1);
                $(".car_input").attr("data-pai",pai);
            }
        }
    });
});
</script>

</body>
</html>

var provinces = new Array("京","沪","浙","苏","粤","鲁","晋","冀",
            "豫","川","渝","辽","吉","黑","皖","鄂",
            "津","贵","云","桂","琼","青","新","藏",
            "蒙","宁","甘","陕","闽","赣","湘");

var keyNums = new Array("0","1","2","3","4","5","6","7","8","9",
            "Q","W","E","R","T","Y","U","I","O","P",
            "A","S","D","F","G","H","J","K","L",
            "OK","Z","X","C","V","B","N","M","Del");
var next=0;
var num=0;
    function showProvince(){
            $("#pro").html("");
            var ss="";
            for(var i=0;i<provinces.length;i++){
                ss=ss+addKeyProvince(i)
            }
            $("#pro").html("<ul class=‘clearfix ul_pro‘>"+ss+"<li class=‘li_close‘ onclick=‘closePro();‘><span>关闭</span></li><li class=‘li_clean‘ onclick=‘cleanPro();‘><span>清空</span></li></ul>");
    }
    function showKeybord(){
            $("#pro").html("");
            var sss="";
            for(var i=0;i<keyNums.length;i++){
                sss=sss+‘<li class="ikey ikey‘+i+‘ ‘+(i>9?"li_zm":"li_num")+‘ ‘+(i>28?"li_w":"")+‘" ><span onclick="choosekey(this,‘+i+‘);">‘+keyNums[i]+‘</span></li>‘
            }
            $("#pro").html("<ul class=‘clearfix ul_keybord‘>"+sss+"</ul>");
    }
    function addKeyProvince(provinceIds){
        var addHtml = ‘<li>‘;
            addHtml += ‘<span onclick="chooseProvince(this);">‘+provinces[provinceIds]+‘</span>‘;
            addHtml += ‘</li>‘;
            return addHtml;
    }

    function chooseProvince(obj){
       $(".input_pro span").text($(obj).text());
       $(".input_pro").addClass("hasPro");
       $(".input_pp").find("span").text("");
       $(".ppHas").removeClass("ppHas");
       next=0;
       showKeybord();
       $(".car_input").attr("data-pai","");
       getpai($(obj).text());
    }    

    function choosekey(obj,jj){
    //$("input[type=checkbox]").is(":checked");
        if(jj==29){
            alert("车牌："+$(".car_input").attr("data-pai"));
            layer.closeAll();
        }else if(jj==37){
            if($(".ppHas").length==0){
                $(".hasPro").find("span").text("");
                $(".hasPro").removeClass("hasPro");
                showProvince();
                next=0;
            }
            $(".ppHas:last").find("span").text("");
            $(".ppHas:last").removeClass("ppHas");
            next=next-1;
            if(next<1){
                next=0;
            }
            //console.log(next);
        }else{
            if($("input[type=checkbox]").is(":checked")){
                num = 6;
            }else{
                num = 5;
            }

            if(next>num){
                return
            }
            //console.log(next);
            for(var i = 0; i<$(".input_pp").length;i++){
                if(next==0 & jj<10 & $(".input_pp:eq("+next+")").hasClass("input_zim")){
                    layer.open({
                        content: ‘车牌第二位为字母‘,
                        skin: ‘msg‘,
                        time: 1
                    });
                    return
                }
                $(".input_pp:eq("+next+")").find("span").text($(obj).text());
                $(".input_pp:eq("+next+")").addClass("ppHas");
                next=next+1;
                if(next>num){
                    next=num+1;
                }
                getpai($(obj).text());
                return
            }

        }

    }
    function closePro(){
       layer.closeAll()
    }
    function cleanPro(){
       $(".ul_input").find("span").text("");
       $(".hasPro").removeClass("hasPro");
       $(".ppHas").removeClass("ppHas");
       next=0;
    }
    function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
    function getpai(ss){
        var s1 = $(".car_input").attr("data-pai");
        $(".car_input").attr("data-pai",s1+ss);

        //var pai=trimStr($(".car_input").text());
        //$(".car_input").attr("data-pai",pai);
    }
window.onload = function() {

    $(".input_pro").click(function(){
         layer.open({
            type: 1
            ,content: ‘<div id="pro"></div>‘
            ,anim: ‘up‘
            ,shade :false
            ,style: ‘position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:0; border:none;‘
          });
         showProvince()
    })
    $(".input_pp").click(function(){
         if($(".input_pro").hasClass("hasPro")){ // 如果已选择省份
             layer.open({
                type: 1
                ,content: ‘<div id="pro"></div>‘
                ,anim: ‘up‘
                ,shade :false
                ,style: ‘position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:0; border:none;‘
              });
             showKeybord()
         }else{
             $(".input_pro").click()
         }
    })

}

原文地址：https://www.cnblogs.com/zhixi/p/8946040.html

时间： 2024-10-09 14:58:45

jQuery移动端手机键盘输入车牌号代码【附加新能源车牌】的相关文章

jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果:首先检测手机是否符合1开头,11位数字的格式:若不符合,则提示错误信息并返回false:否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: 年利率高达14.4% 上海投融理财,20万起投,年化收益14.4% 房产抵押,

根据列表内车牌号,统计各省市车牌占有量

1 cars = ['鲁A32444','鲁B12333','京B8989M','黑C49678','黑C46555','沪 B25041'] 2 locals = {'沪':'上海', '黑':'黑龙江', '鲁':'山东', '鄂':'湖北', '湘':'湖南'} 第一种做法: dic = {} all = "".join(cars) #把所有车牌连接起来.replace(" ","") for i in locals: num = all.

手机识别车牌号，拍照识别车牌号

手机识别车牌号,拍照识别车牌号 关键词:移动端手机识别车牌号,安卓车牌识别SDK,车牌识别开发包,安卓车牌识别,ios车牌识别 描述 手机识别车牌号SDK是我公司开发的基于移动平台的车牌识别SDK开发包,支持Android.ios等多种主流移动操作系统.该产品采用手机.平板电脑摄像头拍摄汽车牌照图像,然后通过OCR软件对车牌颜色.车牌号进行识别. 车牌识别界面 手机识别车牌号SDK产品功能 1. 整牌识别率高达99.7%,尤其汉字识别遥遥领先同类产品: 2. 识别速度快,极致优化的车牌定位和识别

中文姓名，身份证号，车牌号(正则判断)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="format-detection" content=&q

opencv实现车牌识别之车牌号定位_1

简介 按照在哪里跌倒就在哪里爬起来的精神,本章继续做车牌号的检测识别.所有步骤分为3步完成:车牌号定位,车牌号字符分割.字符识别. 本章为第一部分:车牌号定位. 效果演示 正式开始讲解之前,先看下车牌号定位出来的效果演示.注:本文所有图片均来源于网络. 如图所示,定位到车牌号之后,将车牌号用黄色框选起来,同时将该车牌复制为新图片显示出来. 代码及实现原理讲解 图像灰阶/二值化 首先也是常用的操作,将图像灰阶化,然后从像素值为255一侧开始,以累积像素占总像素5%的的地方作为二值化的阀值,进而获得

不想手动输入车牌号？手机Android端车牌识别助你一臂之力！

关键词:手机车牌识别 Android端车牌识别 移动端车牌识别 车牌识别 随着车辆的暴涨,对车辆的管理也是日益严峻.需要更多灵活的有效的管理方式,伴随着移动端APP的火爆应用,北京易泊时代将原来应用在电脑端的车牌识别技术转移到了手机Android端,手机Android端车牌识别更加灵活,方便,为人们的应用解决了很多实际困难. 手机Android端车牌识别产品描述 手机Android端车牌识别系统是北京易泊时代开发的基于移动平台的证件识别应用程序,支持Android/IOS等多种主流移动操作系统.

noVNC支持手机自带键盘输入

代码修改说明 novnc的web链接类似为:http://192.168.1.177:6080/vnc_auto.html?token=105356fa-bbe3-43e4-a0ce-7703dc42eacc&title=test3(f2e74368-952c-48b7-b5cc-13f000d6807a) 使用手机自带键盘这个功能是在vnc.html页面实现的,所以需要将这个页面的这个功能移植到vnc_auto.html中 修改步骤 测试代码中直接将vnc.html的代码覆盖了vnc_auto

移动端输入框被手机键盘挡住

在没有定位的情况下,解决输入框被手机键盘挡住时,可以参考: var loaclHeight = $("section").height();//获取可视宽度 $("input,textarea").focus(function() { var keyboardHeight = localHeight - $("section").height();//获取键盘的高度 var keyboardY = localHeight - keyboardHe

进击的UI--------------------(邮箱,手机,车牌号验证)

#pragma mark - 私有方法 #pragma mark 邮箱验证 - (BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-][email protected][A-Za-z0-9.-]+\\.[A-Za-z]{2,4}"; NSPredicate *emailTest = [NSPredicate predicateWithFormat:@"SELF MA