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' οnclick='closePro();'><span>关闭</span></li><li class='li_clean' οnclick='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 οnclick="choosekey(this,'+i+');">'+keyNums[i]+'</span></li>'} $("#pro").html("<ul class='clearfix ul_keybord'>"+sss+"</ul>");}function addKeyProvince(provinceIds){var addHtml = '<li>';addHtml += '<span οnclick="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()}})}

弹窗使用的是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>

View Code

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' οnclick='closePro();'><span>关闭</span></li><li class='li_clean' οnclick='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 οnclick="choosekey(this,'+i+');">'+keyNums[i]+'</span></li>'} $("#pro").html("<ul class='clearfix ul_keybord'>"+sss+"</ul>");}function addKeyProvince(provinceIds){var addHtml = '<li>';addHtml += '<span οnclick="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()}})}

View Code

转载于:https://www.cnblogs.com/zhixi/p/8946040.html

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

微信小程序输入车牌号（有新能源）
微信小程序输入车牌号(有新能源) <view class="page"><view class="carN ...
小程序验证车牌号（含新能源车牌）
之前写的一个,小程序扫描二维码,正则校验:https://www.jianshu.com/p/61217e42a143,现在又遇到了一个小程序验证车牌号(含新能源车牌)的需求,其实思想是类似的,一并写 ...
微信小程序验证车牌号（含新能源车牌）
输入符合以上规则的车牌号可以通过验证,如果不是,则不可以通过验证 let reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF ...
手机扫描识别车牌号SDK
手机扫描识别车牌号的功能描述手机扫描识别车牌号的功能SDK是我公司开发的基于移动平台的车牌识别软件开发包,支持android.ios等多种主流移动操作系统.该产品采用手机.平板电脑摄像头拍摄汽车牌照 ...
安卓手机拍照识别车牌号OCR sdk
关键词:车牌识别车牌ocr识别新能源车牌识别安卓车牌识别 ios车牌识别车牌识别已经成为每个城市的车辆管理重点工作之一,有效.准确.及时的车牌识别可以方便警务人员的交通执法.停车场车辆管理等工 ...
android 自定义键盘_Android自定义输入车牌号键盘、车牌简称，数字，字母键盘...
本文来自阿钟的投稿,全文阅读大约十分钟为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘,而不是使用系统的键盘输入,上效果图: 横屏效果图片竖屏效果图片一.首先我们要来分析一下需要做哪些东 ...
uniapp 车牌号输入车牌号键盘新能源车牌键盘特殊车辆车牌键盘
1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...
微信小程序 - 实现车牌输入功能，自定义车牌号输入法组件（键盘弹出后输入车牌号，可自定义各地区及界面样式）超详细注释组件插件示例源码
效果图本文实现了输入车牌号码专用键盘组件,高效简洁无 BUG, 你可以直接复制组件源码,干净整洁的代码轻松移植到自己的项目中. 如下图所示,本文提供这样一个组件供你复制,快速完成功能. 组件源码 ...
通过自定义android键盘实现车牌号输入法
前言很多的移动应用中经常需要限定用户输入特定的字符,比如吱妇保,微信钱包等在输入支付密码的时候就是直接调出的纯数字键盘并且不允许用户切换为非数字键盘,这在一定程度上方便了前端数据校验同时也有很好的用 ...

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

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

最新文章

热门文章