自定义车牌号输入键盘

  • Q5_222013
    了解作者
  • 56.9KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 11:04
    上传日期
自适应的自定义车牌号输入键盘, jQuery基于layui制作手机端车牌号码输入弹出键盘选择,支持新能源汽车车牌输入格式代码。
车牌号键盘.zip
内容介绍
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" media="(device-height: 568px)"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>车牌号码输入</title> <link type="text/css" rel="stylesheet" href="style/style.css" /> <script src="js/jquery.min.js"></script> <style> .car_input{width:100%; margin:100px auto;} </style> </head> <body> <div class="car_input"> <ul class="clearfix ul_input"> <li id="cp1" class="input_zim" data-sort="1"><span class="carnumber"></span></li> <li id="cp2" data-sort="2"><span class="carnumber"></span></li> <li id="cp3" data-sort="3"><span class="carnumber"></span></li> <li id="cp4" data-sort="4"><span class="carnumber"></span></li> <li id="cp5" data-sort="5"><span class="carnumber"></span></li> <li id="cp6" data-sort="6"><span class="carnumber"></span></li> <li id="cp7" data-sort="7"><span class="carnumber"></span></li> <li id="cp8" data-sort="8" style="display:none;"><span class="carnumber"></span></li> <li class="xinneng"><span></span></li> </ul> </div> <script> // 拼接出最后车牌号 // var carNum = '' // $('.carnumber').each(function (i, v) { // carNum = carNum + $(v).html() // }); </script> <script src="js/slide.js"></script> <script src="layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var $ = layui.jquery ,layer = layui.layer ,form = layui.form; $('.car_input li').on('click', function () { document.activeElement.blur(); // 阻止弹出系统软键盘 var _cliss = $(this).attr("class"); var _sort = $(this).data("sort"); $(this).addClass("input_zim").siblings().removeClass("input_zim"); if(_sort == 1){ $('body').keyboard({ defaults:'symbol', //键盘显示类型 English 字母 number 数字 symbol 符号 inputClass:_cliss, //输入框Class }); }else{ $('body').keyboard({ defaults:'English', //键盘显示类型 English 字母 number 数字 symbol 符号 inputClass:_cliss, //输入框Class }); } }); $(document).on("click", '#keyboard .keyContent li', function(event){ $(".input_zim span").html($(this).text()); var _sort = $(".input_zim").data("sort") + 1; if(_sort == 2){ $('body').keyboard({ defaults:'English', //键盘显示类型 English 字母 number 数字 symbol 符号 }); } $("#cp"+_sort).addClass("input_zim").siblings().removeClass("input_zim"); }); $(document).on("click", '.del', function(event){ $(".input_zim span").text(''); var _sort = $(".input_zim").data("sort") - 1; $("#cp"+_sort).addClass("input_zim").siblings().removeClass("input_zim"); }); $(document).on("click", '.xinneng', function(event){ $(".xinneng").remove(); $("#cp8").show(); }); }); </script> </body> </html>
评论
    相关推荐