當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/20 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery移动端手机键盘输入车牌号代码【附加新能源车牌】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近在移動應用中要做到一個錄取汽車牌號碼的功能，在網上找了一個插件后發現沒有增加新能源車牌功能，

和同事研究了一下，將其進行改造完美的實現了這個功能，這里放出該插件的源碼；

原插件來自A5源碼網【http://down.admin5.com/texiao/138473.html】

彈窗使用的是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移动端手机键盘输入车牌号代码【附加新能源车牌】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：必看，关于sql的慢查询及解决方案
下一篇：学习mybatis plus