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车牌效果,快速输入车牌号效果相关推荐

  1. 微信小程序 输入车牌号(有新能源)

    微信小程序 输入车牌号(有新能源) <view class="page"><!-- 车牌号码输入框 --><view class="carN ...

  2. android 自定义键盘_Android自定义输入车牌号键盘、车牌简称,数字 ,字母键盘...

    本文来自阿钟的投稿,全文阅读大约十分钟 为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘,而不是使用系统的键盘输入,上效果图: 横屏效果 图片 竖屏效果 图片 一.首先我们要来分析一下需要做哪些东 ...

  3. uniapp 车牌号输入 车牌号键盘 新能源车牌键盘 特殊车辆车牌键盘

    1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...

  4. 智能停车场(可检测车牌通过oled屏幕显示车牌号)语音+LED灯提示该车辆所停车位

    今天通过自己的学习,我做了一个智能停车场,首先先来介绍一下他的功能,通过识别车辆的车牌号并在OLED屏幕上显示车牌号,然后升降杆升起,并通过语音播报提示车辆所去的车位,同时会有绿色指示灯提示该车位位置 ...

  5. 微信小程序 自助停车,输入车牌号功能实现

    话不多说,先上效果图 效果图 ( 改一改h5也能用 ) 功能列表 根据输入位置自动显示下方键盘为候选地区或数字字母 输入位置后自动跳转至下一位 删除号码后自动返回上一位 点击可选填新能源号码 代码复现 ...

  6. OC仿支付宝输入UITextField输入车牌号

    效果图,如果使用,出现任何问题请告知,或者下方留言,我好以及改正 .h文件: #import <UIKit/UIKit.h>@interface LicenseKeyBoardView : ...

  7. 微信小程序 - 实现车牌输入功能,自定义车牌号输入法组件(键盘弹出后输入车牌号,可自定义各地区及界面样式)超详细注释组件插件示例源码

    效果图 本文实现了 输入车牌号码专用键盘组件,高效简洁无 BUG, 你可以直接复制组件源码,干净整洁的代码轻松移植到自己的项目中. 如下图所示,本文提供这样一个组件供你复制,快速完成功能. 组件源码 ...

  8. jQuery移动端手机键盘输入车牌号代码【附加新能源车牌】

    最近在移动应用中要做到一个录取汽车牌号码的功能,在网上找了一个插件后发现没有增加新能源车牌功能, 和同事研究了一下,将其进行改造完美的实现了这个功能,这里放出该插件的源码: 原插件来自A5源码网[ht ...

  9. 小程序验证车牌号(含新能源车牌)

    之前写的一个,小程序扫描二维码,正则校验:https://www.jianshu.com/p/61217e42a143,现在又遇到了一个小程序验证车牌号(含新能源车牌)的需求,其实思想是类似的,一并写 ...

最新文章

  1. 机器人3·15 | 赛迪「机器人国评中心」揭示机器人产品质量6大痛点!
  2. Scala键盘录入代码示例
  3. 将5:400等类型的数据转成哈希表
  4. javaparser_JavaParser入门:以编程方式分析Java代码
  5. Redis事务回滚深入
  6. 【飞秋】SQL Server性能调教系列(4)--Profiler(上)
  7. 用户权限 英文_伴鱼绘本终身VIP卡+自然拼读精品课,完课返461元!英文原版绘本...
  8. framework2.0和1.1一样,怎么办
  9. lisp 设计盘形齿轮铣刀_齿轮是怎么来的——图解6种齿轮加工工艺
  10. Hive 之collect_list/collect_set(列转行)
  11. 美国当地时间4月17日中国概念股收盘行情
  12. Java 6.22练习-----模拟物流快递系统程序设计
  13. 小程序Progress组件介绍
  14. canvas漫天闪烁的星星
  15. 黎曼流形(Riemannian manifold)
  16. Codeforeces——69A Young Physicist
  17. 手机上好用的记事本工具
  18. undefined reference to `timersub‘ 错误处理
  19. VBA:获取工作簿中所有表的名称、地址
  20. node 简介及安装

热门文章

  1. Matlab中利用findpeaks找波峰和波谷
  2. 嵌入式linux操作系统安装,嵌入式操作系统-linux安装.ppt
  3. 电容充放电时间计算公式
  4. revit二次开发 创建图纸图框,视图放到图框中心点位置
  5. Java修炼之凡界篇 筑基期 第03卷 流程控制 第04话 循环结构
  6. html怎么能调用微信语音,华为微信的语音通话怎么录音
  7. html布局(两列布局的常见方式)
  8. BLDC-无刷直流电机整体解决方案
  9. Elasticsearch:如何使用 Elasticsearch PHP 客户端创建简单的搜索引擎
  10. 如何理解FFT中时间窗与RBW的关系