移动端车牌号键盘
<div class="keyboardMask"> <div class="keyboardMask_p"> <div class="keyboardMask_fff"> <p>请输入车牌号码</p> <i class="delete-right"></i> <!--虚拟的input--> <ul class="virtualInput"> <li class="vi_active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="dialog__ft"> <a href="javascript:;" id="dialog_cancel" class="color-2c80de">取消</a> </div> </div> </div> </div>
<style>
/* 键盘输入车牌号 */
/*最开始的input样式*/
.vi-1{background: #ffffff;}
.vi-2{border-bottom: 1px solid #dfdfdf;height: 1.1rem;color:#333333;font-size: 0.32rem;line-height: 1.1rem;}
.vi-3{width: 2.5rem;padding-left: 0.4rem;}
.vi-4{position: relative;width: 5rem;text-align: left;}
.vi-6{
color: #000;
}
/*键盘及虚拟input样式*/
#keyboard_5xbogf8c ,#keyboard_5xbogf8c li {
list-style: none;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#keyboard_5xbogf8c,#keyboard_5xbogf8c_city{
position:fixed;
z-index:10;
left: 0;
width: 100%;
padding:0.4rem 0.1rem 0.2rem 0.1rem;
background: #d1d5da;
border-radius: 0.05em;
/*display:none;*/
right:0;
-webkit-text-size-adjust:none;
}
#keyboard_5xbogf8c_city{
bottom: 0;
}
#keyboard_5xbogf8c{
bottom: -5rem;
}
#keyboard_5xbogf8c_city{
position:fixed;
z-index:10;
left: 0;
width: 100%;
padding:0.2rem 0.1rem 0.1rem 0.1rem;
background: #d1d5da;
border-radius: 0.05em;
/*display:none;*/
right:0;
bottom:0;
-webkit-text-size-adjust:none;
}
#keyboard_5xbogf8c ::after {
content: "";
display: table;
clear: both;
}
#keyboard_5xbogf8c_city li{
position:relative;
font-family: arial,"Vrinda";
width: 11%;
height: 0.77rem;
line-height: 0.77rem;
background-color: #ffffff;
border-radius: 0.07rem;
float: left;
text-align: center;
font-size:0.34rem;
vertical-align: text-top;
margin: 0.7%;
margin-bottom: 0.25rem;
cursor: pointer;
position: relative;
overflow:visible ;
}
#keyboard_5xbogf8c li{
position:relative;
font-family: arial,"Vrinda";
width: 0.64rem;
height: 0.77rem;
line-height: 0.77rem;
background-color: #ffffff;
border-radius: 0.07rem;
float: left;
text-align: center;
font-size:0.34rem;
vertical-align: text-top;
margin-right: 0.1rem;
margin-bottom: 0.25rem;
cursor: pointer;
position: relative;
overflow:visible ;
}
#keyboard_5xbogf8c_city li:active {
box-shadow: inset 0 0.04em 0 rgba(0,0,0,.5);
top:0.08em;
color: #ffffff;
background: #1da1f2;
}
li{
list-style: none;
}
#keyboard_5xbogf8c li:active {
box-shadow: inset 0 0.04em 0 rgba(0,0,0,.5);
top:0.08em;
color: #ffffff;
background: #1da1f2;
}
.noMarginRinght {
margin-right: 0 !important;
}
.letterA{
margin-left: 0.37rem !important;
}
.letterZ{
margin-left: 1.1rem !important;
}
.delete{width: 0.64rem;
height: 0.77rem;
line-height: 0.77rem;
text-align: center;
border-radius: 0.07rem;color: #ffffff;margin-right: 0;width:0.9rem;display: block;position: absolute;right: 0;bottom: 0.45rem;margin-right: 0;background: #acb4bf; }
.delete:active{ box-shadow: inset 0 0.04em 0 rgba(0,0,0,.5);bottom:0.44rem;background: rgba(255, 0, 0, 0.31) ;}
.keyboardMask{
display: none;
position: fixed;
height: 100%;
width: 100%;
top:0;
left: 0;
background: rgba(102, 102, 102, 0.52);
z-index: 100;
}
.keyboardMask_p{
position: fixed;
left: 0;
top: 10%;
width: 100%;
}
.keyboardMask_fff{
font-size: .4375rem;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #353535;
background:#fff;
margin: 0 .2rem;
height: 4rem;
border-radius: .2rem;
text-align: center;
padding-top: .6rem;
}
.virtualInput{
font-size: 0;
background:#fff;
margin: .4rem .3rem 0.1rem .3rem;
/* border: .02rem solid #a2c7ec;
border-radius: .25rem; */
border-bottom: .02rem solid #a2c7ec;
}
.virtualInput li{text-align:center;line-height:0.97rem;font-size: 0.34rem;vertical-align: middle;height: 0.97rem;width: 0.68rem;background: #ffffff;border-radius: 0.06rem;display: inline-block;margin: 0.05rem;}
.virtualInput li:nth-child(3){
margin:0.34rem 0.25rem;
height: 0.3rem;
width: 0.3rem;
border-radius: 50%;
background: #a2c7ec;
}
.vi_active{border: 1px solid #1da1f2;}
.vi_numberHide{display: none;}
.delete-right{
background: url(../../images/delete-right.png);
width: .4rem;
height: .4rem;
background-size: 100%;
display: inline-block;
position: absolute;
top: 0;
right: .2rem;
margin: .2rem;
}
/* 取消确定 */
.dialog__ft{
position: relative;
line-height: 1rem;
font-size: .35rem;
display: -ms-flexbox;
display: flex;
padding-top: .38rem;
}
.dialog__ft a{
display: block;
-ms-flex: 1;
flex: 1;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: relative;
}
.color-2c80de{
color: #2c80de;
}
</style>
<script>
/* 车牌号码 */
(function () {
function a(d, c, e) {
if (d.addEventListener) {
d.addEventListener(c, e, false)
} else {
d.attachEvent('on' + c, e)
}
}
function b() {
var c = document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize = c / 7.5 + 'px'
}
b();
a(window, 'resize', b)
}());
$(function(){
$('#toKeyboard').on('click',function(){
$('.keyboardMask').css('display','block');
});
$('#keyboard_5xbogf8c_city').on('click',function(event){
event.stopPropagation();
})
//渲染城市键盘
var cityData=[
'京','津','冀','晋','辽','蒙','吉','黑',
'沪','苏','浙','皖','闽','赣','鲁','豫',
'鄂','湘','粤','桂','琼','渝','川','贵',
'云','陕','甘','青','宁','新','藏','使',
]
var html='';
html="<ul id='keyboard_5xbogf8c_city'>";
for(var i=0;i<cityData.length;i++){
html=html+'<li>'+cityData[i]+'</li>';
}
html=html+'</ul>';
$(".keyboardMask").append(html);
//为城市键盘按钮绑定事件
$('#keyboard_5xbogf8c_city').on('click','li',function(event){
event.stopPropagation();
$('.virtualInput').find('li').eq(0).html($(this).html());
$('.virtualInput').find('li').eq(0).removeClass('vi_active');
$('.virtualInput').find('li').eq(1).addClass('vi_active');
$('#keyboard_5xbogf8c_city').animate({
bottom:"-5rem",
},300,function(){
$('#keyboard_5xbogf8c').animate({bottom:"0"})
});
});
//渲染字母键盘
$(".keyboardMask").append("<ul id='keyboard_5xbogf8c'>"+
"<li>1</li>"+
"<li>2</li>"+
"<li>3</li>"+
"<li>4</li>"+
"<li>5</li>"+
"<li>6</li>"+
"<li>7</li>"+
"<li>8</li>"+
"<li>9</li>"+
"<li class='noMarginRinght'>0</li>"+
"<li>Q</li>"+
"<li>W</li>"+
"<li>E</li>"+
"<li>R</li>"+
"<li>T</li>"+
"<li>Y</li>"+
"<li>U</li>"+
"<li>I</li>"+
"<li>O</li>"+
"<li class='noMarginRinght'>P</li>"+
"<li class='letterA'>A</li>"+
"<li>S</li>"+
"<li>D</li>"+
"<li>F</li>"+
"<li>G</li>"+
"<li>H</li>"+
"<li>J</li>"+
"<li>K</li>"+
"<li class='noMarginRinght'>L</li>"+
"<li class='letterZ'>Z</li>"+
"<li>X</li>"+
"<li>C</li>"+
"<li>V</li>"+
"<li>B</li>"+
"<li>N</li>"+
"<li>M</li>"+
"<span class='delete'>X</span>"+
"</ul>");
//最开始隐藏字母键盘上面的数字
hideNumber();
//字母键盘按钮绑定事件
$('#keyboard_5xbogf8c li').bind('click',function(event){
if($('.delete').hasClass('clicked')){ //修复在删除键删除最后一个字符时由于键盘切换导致按太快会输入其它字符问题
return false;
}
event.stopPropagation();
var index=$('.vi_active').index();
if(index==1){
$('.virtualInput').find('li').eq(1).html($(this).html());
$('.virtualInput').find('li').eq(1).removeClass('vi_active');
$('.virtualInput').find('li').eq(3).addClass('vi_active');
$('.vi_numberHide').removeClass('vi_numberHide');
}else if(index>=7){
$('.virtualInput').find('li').eq(index).html($(this).html());
setTimeout(function(){
var carNum=carNumber();
$('#toKeyboard').val(carNum);
$('.keyboardMask').css('display','none');
},500);
}
else{
$('.virtualInput').find('li').eq(index).html($(this).html());
$('.vi_active').removeClass('vi_active');
$('.virtualInput').find('li').eq(index+1).addClass('vi_active');
}
});
//得到输入的车牌号
function carNumber(){
var html='';
$('.virtualInput li').each(function(){
html+= $(this).html();
})
return html;
}
//隐藏键盘中数字
function hideNumber(){
for(var i=0;i<10;i++){
$('#keyboard_5xbogf8c li').eq(i).addClass('vi_numberHide');
}
}
//删除按钮
$('.keyboardMask').on('click','.delete',function(event){
event.stopPropagation();
if($(this).hasClass('clicked')){
return false;
}
$(this).addClass('clicked');
var index=$('.vi_active').index();
if(index<=0){
$('.virtualInput').find('li').eq(index).html('');
$(this).removeClass('clicked');
}else{
$('.virtualInput').find('li').eq(index).html('');
$('.vi_active').removeClass('vi_active');
if(index==3){
hideNumber();
$('.virtualInput').find('li').eq(index-2).addClass('vi_active');
$(this).removeClass('clicked');
}else if(index==1){
$('#keyboard_5xbogf8c').animate({
bottom:"-5rem",
},300,function(){
$('#keyboard_5xbogf8c_city').animate({bottom: "0"},300,function(){
$('.delete').removeClass('clicked');
});
});
$('.virtualInput').find('li').eq(index-1).addClass('vi_active');
}else{
$('.virtualInput').find('li').eq(index-1).addClass('vi_active');
$(this).removeClass('clicked');
}
}
})
})
</script>
记得引入jQuery哟
我是一个对理想有着执着追求的人，坚信是金子总会发光。大学毕业后的工作，让我在文案策划方面有了很大的提高，文笔流畅，熟悉传媒工作、广告学制作与设计等工作方面。为人热情，活泼，大方， 本人好学上进，诚信、敬业、责任心强，有强烈的团体精神，对工作认真积极，严谨负责。
本人性格内外结合,适应能力强，为人诚实，有良好的人际交往能力，具备相关的专业知识和认真。细心、耐心的工作态度及良好的职业道德修养。相信团体精神的我对工作认真负责，总希望能把事情做得更好! 性格开朗，对文字语言和数字敏感，对生活充满希望，对工作充满热情! 能在短期间内适应新环境，有强烈的品质意识;对工作认真负责，上进心强! 懂电脑基本操作，熟练小键盘操作!
