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

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

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

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

<!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

相关文章: