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