移动端车牌号键盘

最新推荐文章于 2023-06-28 15:04:57 发布
最新推荐文章于 2023-06-28 15:04:57 发布
阅读量362 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/chihObj/articles/11396271.html
版权 
<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哟

转载于:https://www.cnblogs.com/chihObj/articles/11396271.html

dibuyao2061
关注
Vue H5 前端自定义车牌号输入键盘(支持新能源)
Hubery96的博客
08-12 3046
这个项目是基于 vue2+vant 写的录入车牌的键盘, 有需要的伙伴可以参考一下;
jQuery手机端输入框键盘键入车牌号码特效源码
08-03
jQuery手机端输入框键盘键入车牌号码特效源码
用vue写的移动端车牌号输入法
weixin_30741653的博客
11-24 473
效果图: (录制了视频演示,然而不会上传.....心塞.....) 本页面所在项目已上传GitHub，github下载地址：https://github.com/dan-Zd/car-vueapp 车牌键盘页面在 README.md有说明 代码部分: 车牌号输入框---html <div class="content-car-number"> ...
jQuery移动端手机键盘输入车牌号代码.zip
06-07
jQuery移动端手机键盘输入车牌号代码.zip
移动端车牌号码输入
06-01
移动端车牌号码输入
jQuery移动端手机键盘输入车牌号特效代码
03-20
本项目"jQuery移动端手机键盘输入车牌号特效代码"是针对这个问题的一个解决方案，它利用`jQuery 1.7.1.min.js`版本，模拟了手机键盘输入车牌号的过程，旨在为用户在小型屏幕上提供更友好的交互体验。 在车牌号输入...
vue 车牌号输入专用键盘
04-19
在“vue 车牌号输入专用键盘”这个项目中，开发者设计了一个专门用于输入车牌号码的组件，它针对车牌号的特殊格式和输入需求进行了优化。 这个组件的亮点在于其自定义插槽功能，自定义插槽允许用户根据自己的需求来...
vue车牌号输入键盘.zip
08-13
在这个项目中，“vue车牌号输入键盘.zip” 提供了一个专门设计的Vue组件，用于在Web应用中实现车牌号的输入功能，特别适合汽车相关的应用场景。这个组件考虑到了新能源汽车的车牌格式，确保了灵活性和兼容性。 首先...
jQuery移动端手机键盘输入车牌号新能源车牌号特效代码【支持多个车牌号码】
06-07
该代码资源是一个基于jQuery的移动端车牌号码输入特效插件，主要针对手机用户在输入车牌号时提供便捷的交互体验。这个特效代码不仅适用于普通车牌号的输入，还特别支持新能源车牌号，允许在同一页面上同时处理一个或...
vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）
最新发布
m0_52685922的博客
06-28 4258
支持点击输入框删除或输入车牌，可直接在uniapp项目中运行，将view标签换为div、并且将rpx单位换成px可在vue项目里运行。
jQuery结合layui实现移动端车牌填写.rar
12-16
jQuery移动端车牌号码输入支持新能源车号选择，手机端使用，电脑端使用会出现样式不全的情况，需要具体情况调整
手机端车牌号码键盘的vue组件
08-10
手机端车牌号码键盘的vue组件
html汽车车牌输入插件
11-08
自己手写的html汽车车牌输入插件，可区分普通汽车与新能源汽车
PlateNumberKeyBoard:Android 自定义车牌键盘
05-18
PlateNumberKeyBoard Android 自定义车牌键盘 最近在做物流的项目，需要输入车牌号，传统的输入体验并不好，来回切换还要手打，便有了自定义键盘的想法。 其实这个车牌需求并不多见，物流、租车、停车相关的会常见一些，好在有前辈已经铺好路了 这个比较详细： 1.在res文件夹下新建xml文件夹，新建两个文件：number_or_letters.xml（数字和大写字母）、province_abbreviation.xml（省会、直辖市、特别行政区简称）。 number_or_letters.xml <?xml version="1.0" encoding="UTF-8"?> <Keyboard android:keyWidth="10%p" android:keyHeight="8%" android:horizontalGap="0.0px" andro
移动端车牌号键盘组件
yuzenan的博客
03-24 764
记录下小组件，方便日后用到 template <template> <view class='main'> <view class="title"> <view class="nav" @click="cancel">取消</view> {{BrandNumber}} <view class="nav" @click="confirm">确认</view> </view> <
vue 移动端车牌号输入键盘组件
qq_38886284的博客
04-19 684
组件资源地址：https://download.csdn.net/download/qq_38886284/87705249?spm=1001.2014.3001.5501需要的小伙伴请到这里下载哟~组件效果： PropsEventsSlots使用示例：
jQuery移动端车牌号码输入
tanqingfu1的博客
12-16 1684
<!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=".
jQuery移动端手机键盘输入车牌号代码【附加新能源车牌】
weixin_30709061的博客
04-25 963
最近在移动应用中要做到一个录取汽车牌号码的功能，在网上找了一个插件后发现没有增加新能源车牌功能， 和同事研究了一下，将其进行改造完美的实现了这个功能，这里放出该插件的源码； 原插件来自A5源码网【http://down.admin5.com/texiao/138473.html】 <!DOCTYPE html> <html> <head>...
android 自定义车牌键盘（kotlin）
linvisf的博客
09-30 2471
Android 自定义车牌键盘 （kotlin）
jQuery实现移动端手机键盘车牌号输入功能
资源摘要信息:"此压缩包包含的文件是关于使用jQuery在移动端开发时，针对用户通过手机键盘输入车牌号的场景所编写的一系列代码。车牌号作为特定格式的输入信息，通常包括字母和数字的组合。在移动端设备上，由于屏幕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值