html5车牌效果,快速输入车牌号效果
HtmlCssJs
点击下面任意方框
京
沪
浙
苏
粤
鲁
晋
冀
豫
川
渝
辽
吉
黑
皖
鄂
津
贵
云
桂
琼
青
新
藏
蒙
宁
甘
陕
闽
赣
清空
关闭
1
2
3
4
5
6
7
8
9
0
Q
W
E
R
T
Y
U
P
A
S
D
F
G
H
J
K
L
Z
X
C
V
B
N
M
C
del
OK
#key1,#key2 {
border:solid hsla(213,13%,83%,1.00) 1px;
margin-top:10px;
background-color:hsla(213,13%,83%,1.00);
}
input {
vertical-align:middle;
width:60px;
height:40px;
font-size:20px;
text-align:center;
border-radius:5px;
}
#text1 {
align-self:center;
}
button {
border-radius:5px;
background-color:white;
margin-top:2px;
width:75px;
height:40px;
font-size:20px;
}
#btn2 {
background-color:hsla(214,10%,70%,1.00);
}
$(document).ready(function() {
var a = $("#txt1");
$("#txt1").click(function() {
$("#key1").show();
$("#key2").hide();
});
$("#txt2,#txt3,#txt4,#txt5,#txt6,#txt7").click(function() {
if (!$("#txt1").val()) {
$("#key1").show();
$("#key2").hide();
} else {
$("#key1").hide();
$("#key2").show();
}
});
$(".bt").click(function() {
$("#txt1").val($(this).html());
$("#key1").hide();
$("#key2").show();
$("#txt2").val(null);
$("#txt3").val(null);
$("#txt4").val(null);
$("#txt5").val(null);
$("#txt6").val(null);
$("#txt7").val(null);
a = $("#txt1");
});
$(".bt1").click(function() {
a = a.next();
a.val($(this).html());
if ($("#txt2").val() < 10) {
alert("车牌第二位必须是字母!");
$("#txt2").val(null);
a = $("#txt1");
}
if ($("#txt7").val()) {
a = $("#txt7");
}
});
//清空
$("#btn1").click(function() {
a = $("#txt1");
$("#txt1").val(null);
$("#txt2").val(null);
$("#txt3").val(null);
$("#txt4").val(null);
$("#txt5").val(null);
$("#txt6").val(null);
$("#txt7").val(null);
});
//关闭
$("#btn2").click(function() {
$("#key1,#key2").hide();
});
//del
$("#btn3").click(function() {
a.val(null);
a = a.prev();
if (!$("#txt1").val()) {
$("#key1").show();
$("#key2").hide();
}
});
//ok
$("#btn4").click(function() {
$("#key1,#key2").hide();
});
//改变button颜色
});
function mDown(obj) {
obj.style.backgroundColor = "hsla(207,85%,63%,1.00)";
}
function mUp(obj) {
obj.style.backgroundColor = "white";
}
↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.11.3
html5车牌效果,快速输入车牌号效果相关推荐
- 微信小程序 输入车牌号(有新能源)
微信小程序 输入车牌号(有新能源) <view class="page"><!-- 车牌号码输入框 --><view class="carN ...
- android 自定义键盘_Android自定义输入车牌号键盘、车牌简称,数字 ,字母键盘...
本文来自阿钟的投稿,全文阅读大约十分钟 为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘,而不是使用系统的键盘输入,上效果图: 横屏效果 图片 竖屏效果 图片 一.首先我们要来分析一下需要做哪些东 ...
- uniapp 车牌号输入 车牌号键盘 新能源车牌键盘 特殊车辆车牌键盘
1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...
- 智能停车场(可检测车牌通过oled屏幕显示车牌号)语音+LED灯提示该车辆所停车位
今天通过自己的学习,我做了一个智能停车场,首先先来介绍一下他的功能,通过识别车辆的车牌号并在OLED屏幕上显示车牌号,然后升降杆升起,并通过语音播报提示车辆所去的车位,同时会有绿色指示灯提示该车位位置 ...
- 微信小程序 自助停车,输入车牌号功能实现
话不多说,先上效果图 效果图 ( 改一改h5也能用 ) 功能列表 根据输入位置自动显示下方键盘为候选地区或数字字母 输入位置后自动跳转至下一位 删除号码后自动返回上一位 点击可选填新能源号码 代码复现 ...
- OC仿支付宝输入UITextField输入车牌号
效果图,如果使用,出现任何问题请告知,或者下方留言,我好以及改正 .h文件: #import <UIKit/UIKit.h>@interface LicenseKeyBoardView : ...
- 微信小程序 - 实现车牌输入功能,自定义车牌号输入法组件(键盘弹出后输入车牌号,可自定义各地区及界面样式)超详细注释组件插件示例源码
效果图 本文实现了 输入车牌号码专用键盘组件,高效简洁无 BUG, 你可以直接复制组件源码,干净整洁的代码轻松移植到自己的项目中. 如下图所示,本文提供这样一个组件供你复制,快速完成功能. 组件源码 ...
- jQuery移动端手机键盘输入车牌号代码【附加新能源车牌】
最近在移动应用中要做到一个录取汽车牌号码的功能,在网上找了一个插件后发现没有增加新能源车牌功能, 和同事研究了一下,将其进行改造完美的实现了这个功能,这里放出该插件的源码: 原插件来自A5源码网[ht ...
- 小程序验证车牌号(含新能源车牌)
之前写的一个,小程序扫描二维码,正则校验:https://www.jianshu.com/p/61217e42a143,现在又遇到了一个小程序验证车牌号(含新能源车牌)的需求,其实思想是类似的,一并写 ...
最新文章
- 机器人3·15 | 赛迪「机器人国评中心」揭示机器人产品质量6大痛点!
- Scala键盘录入代码示例
- 将5:400等类型的数据转成哈希表
- javaparser_JavaParser入门:以编程方式分析Java代码
- Redis事务回滚深入
- 【飞秋】SQL Server性能调教系列(4)--Profiler(上)
- 用户权限 英文_伴鱼绘本终身VIP卡+自然拼读精品课,完课返461元!英文原版绘本...
- framework2.0和1.1一样,怎么办
- lisp 设计盘形齿轮铣刀_齿轮是怎么来的——图解6种齿轮加工工艺
- Hive 之collect_list/collect_set(列转行)
- 美国当地时间4月17日中国概念股收盘行情
- Java 6.22练习-----模拟物流快递系统程序设计
- 小程序Progress组件介绍
- canvas漫天闪烁的星星
- 黎曼流形(Riemannian manifold)
- Codeforeces——69A Young Physicist
- 手机上好用的记事本工具
- undefined reference to `timersub‘ 错误处理
- VBA:获取工作簿中所有表的名称、地址
- node 简介及安装