jQuery移动端车牌号码输入

<!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-1.10.2.js"></script>
<style>
.car_input{width:500px; 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></span></li>
<li id="cp2" data-sort="2"><span></span></li>
<li id="cp3" data-sort="3"><span></span></li>
<li id="cp4" data-sort="4"><span></span></li>
<li id="cp5" data-sort="5"><span></span></li>
<li id="cp6" data-sort="6"><span></span></li>
<li id="cp7" data-sort="7"><span></span></li>
<li id="cp8" data-sort="8" style="display:none;"><span></span></li>
<li class="xinneng"><span><img src="images/xinweng.png"></span></li>
</ul>
</div>
<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>
jQuery移动端车牌号码输入

Guess you like
