jQuery layui手机车牌号码键盘特效代码下载


jQuery layui手机车牌号码键盘特效代码下载
jQuery layui手机车牌号码键盘特效代码下载以及layui、手机车牌、号码键盘等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" rel="stylesheet" href="style/style.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/slide.js"></script>
<script src="layui/layui.js"></script>

3. HTML代码

<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>
//一般直接写在一个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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章