实现模拟手机全键盘车牌号输入 jq+css
2017-11-01 00:00
585 查看
其实这篇博客并没有什么技术含量，只是比较模拟键盘书写css代码比较繁琐。如果你也有类似的需求，可以将代码复制下来改改。
首先，输入效果：
删除效果：
我喜欢用rem来做适配，所以样式大小全是用的rem写的，顺便说一句，我的设计图宽度是750，因此rem那里除以的是7.5。html及js代码如下:
css代码如下：
以上就是全部代码啦！其实键盘那里也是在一个地方找的大概样式自己改的，虽然改的有点多，因为原作者写的是一个pc的键盘，但是真的还是借鉴了很多，然后因为有点久了，我也忘了来源了，如果被原作者发现可以告诉我出处，我会写上的！
首先，输入效果：
删除效果：
我喜欢用rem来做适配，所以样式大小全是用的rem写的，顺便说一句，我的设计图宽度是750，因此rem那里除以的是7.5。html及js代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>首页</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<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)
}());
</script>
</head>
<body>
<div class="vi-1">
<div class="vi-2 clearfix">
<p class="vi-3 fl">车牌号码</p>
<div class="fl">
<p class="vi-4 vi-6" id="toKeyboard">川</p>
</div>
</div>
<div class="keyboardMask">
<!--虚拟的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>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).load(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').html(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>
</body>
</html>css代码如下：
/*最开始的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: #1da1f2;}
.vi-6:after {
content: " ";
display: inline-block;
height: 0.15rem;
width: 0.15rem;
border-width: 2px 2px 0 0;
border-color: #c8c8cd;
border-style: solid;
-webkit-transform: matrix(.71,.71,-.71,.71,0,0);
transform: matrix(.71,.71,-.71,.71,0,0);
position: relative;
top: -2px;
position: absolute;
top: 50%;
margin-top: -0.08rem;
right: 0.3rem;
}
/*键盘及虚拟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.4rem 0.7rem 0.2rem 0.7rem;
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;
}
#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;}
.virtualInput{font-size: 0;position: absolute;top: 1.55rem;left: 0.65rem;}
.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%;}
.vi_active{border: 1px solid #1da1f2;}
.vi_numberHide{display: none;}以上就是全部代码啦！其实键盘那里也是在一个地方找的大概样式自己改的，虽然改的有点多，因为原作者写的是一个pc的键盘，但是真的还是借鉴了很多，然后因为有点久了，我也忘了来源了，如果被原作者发现可以告诉我出处，我会写上的！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用UI Automation实现自动化测试--7.1 （模拟键盘输入数据在自动化测试中的应用)
- python的pyautogui--模拟鼠标，键盘输入实现大宗商品现货下单
- 如何在Linux下模拟键盘输入 利用驱动程序实现
- vc+如何实现模拟键盘输入，自动输入文字（创世纪篇）
- 使用UI Automation实现自动化测试--7.1 （模拟键盘输入数据在自动化测试中的应用)
- jQuery实现手机上输入后隐藏键盘功能
- vc+如何实现模拟键盘输入，自动输入文字（创世纪篇）
- 在ＶＣ中实现模拟键盘，输入内容并显示在ＬｉｓｔＢｏｘ中。
- java简单实现双色球彩票模拟实例（数组、排序、方法、随机数、键盘输入）
- 模拟键盘输入就是使用SendKeys.Send（“汉字”）与SendKeys.SendWait（“字母”）实现的
- jQuery实现手机上输入后隐藏键盘
- 用DIV+CSS模拟textarea，实现文本框高度自适应用户输入的文本
- 用ARM ADS 的ARMulator插件实现手机LCD和键盘中断的模拟
- 微信小程序车牌号码模拟键盘输入功能的实现代码
- 基于WinIO 3.0实现驱动级键盘模拟输入
- H5+JS+相对单位rem实现第三方支付页（输入金额+模拟数字键盘+自适应布局+大写金额）
- Android模拟键盘输入功能的实现
- 在ＶＣ中实现模拟键盘，输入内容并显示在ＬｉｓｔＢｏｘ中。
- windows模拟键盘输入，QT实现虚拟键盘的实现方式
- CSS实例篇--CSS3实现模拟select以及其中的三角形