使用jq或者 vue 编写车牌控件

基于客户要求，方便用户操作，要求在输入车牌号的时候能有个车牌号的控件，用户可以直接点击

需求分析：

事件：1.键盘的弹出和关闭，2.键盘切换（中英文）3.获取选中的数据 4.大于6个字符禁止继续点击

样式：键盘文字陈列样式

jq方法：点击键盘时获取所在的li 获取值添加到文本框中

vue：思路基本同上

坑：在vue绑定事件获取目标元素时，有可能获取的是父元素或者其他元素，此时的innerhtml不一定是正确的数据

解决方案：获取目标元素是，查看自己想要数据与其他数据的不同点，用这个不同点进行排他

比如本项目中：想要获取的数据正好都是li标签的数据，目标元素不是li则不执行下面的事件

小知识：

字符串的操作：a = a.substring(开始的索引，结束的索引)可以对字符进行截取，或者去除某一段

贴上代码：

代码有点繁琐，可按需进行删改

// jq代码记得引入jq文件

<!DOCTYPE html>

<head>

<title>Document</title>

<script

src="js/jquery-3.1.1.min.js"

type="text/javascript"

charset="utf-8"

></script>

</head>

<style>

#container {

width: 100%;

height: 100%;

padding-top: 50px;

}

#carLicenseBox {

width: 80%;

border: 1px solid #cccccc;

border-radius: 10px;

margin: 0 auto;

padding-bottom: 20px;

overflow: hidden;

background-color: #ffffff;

}

#carLicenseBox .carLicenseTitle {

width: 100%;

height: 70px;

background-color: #478ff1;

text-align: center;

line-height: 70px;

color: white;

font-size: 18px;

}

#carLicenseBox .carLicenseMain {

width: 100%;

height: 160px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

#carLicenseBox .carLicenseMain ul {

width: 100%;

height: 36px;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

}

#carLicenseBox .carLicenseMain ul li {

width: 26px;

height: 34px;

border: 2px solid #cccccc;

text-align: center;

line-height: 34px;

float: left;

margin-right: 8px;

}

#carLicenseBox .carLicenseMain ul li:last-of-type {

margin: 0;

}

#carLicenseBox .carLicenseMain ul li.active {

border: 2px solid #478ff1;

}

#carLicenseBox .carLicenseMain ul li.xinnengyuan {

background-size: 100% 100%;

border: 2px dashed #cccccc;

}

#carLicenseBox .submitBtn {

width: 80%;

height: 45px;

background-color: #478ff1;

border: none;

border-radius: 6px;

text-align: center;

line-height: 45px;

color: white;

font-size: 20px;

margin-left: 10%;

}

#keyboardBox {

width: 50%;

position: absolute;

bottom: 0px;

left: 0px;

z-index: 999;

}

#keyboardBox .provienceBox,

#keyboardBox .textBox {

width: 100%;

background-color: #d0d5d9;

padding-top: 10px;

padding-bottom: 4px;

}

#keyboardBox .provienceBox ul,

#keyboardBox .textBox ul {

width: 100%;

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

margin-top: 10px;

}

#keyboardBox .provienceBox ul:first-of-type,

#keyboardBox .textBox ul:first-of-type {

margin-top: 0px;

}

#keyboardBox .provienceBox ul li,

#keyboardBox .textBox ul li {

width: 40px;

height: 40px;

border-radius: 6px;

text-align: center;

line-height: 40px;

float: left;

background-color: #ffffff;

}

#keyboardBox .textBox {

display: none;

}

#keyboardBox .provienceBox ul .changeContentBtn,

#keyboardBox .provienceBox ul .deleteBtn,

#keyboardBox .textBox ul .changeContentBtn,

#keyboardBox .textBox ul .deleteBtn {

width: 40px;

height: 40px;

background-color: #acb3bb;

text-align: center;

line-height: 40px;

}

* {

margin: 0;

padding: 0;

}

ul li {

list-style: none;

}

body {

background-color: #f3f3f3;

}

.fl {

display: block;

float: left;

}

.fr {

display: block;

float: right;

}

.container {

width: 100%;

height: 100%;

}

</style>

<body>

<div>

<div style=" height: 25px;

width: 100%;">

<div id="inpt"

style="border: 1px solid #ccc;

height: 25px;

border-radius: 5px;

text-align: center;

width: 50%;

float: left"></div>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

$(function() {

var that = this;

var num = 6;

//切换键盘

$(".changeContentBtn").click(function() {

if ($(this).html() == "ABC") {

$("#textBox").show();

$("#provienceBox").hide();

} else {

$("#textBox").hide();

$("#provienceBox").show();

}

});

//获取当前车牌数字索引

function getIndex() {

var index;

if ($("#inpt").text() == "") {

index = 0;

} else {

var a = $("#inpt").text();

index = a.length;

}

return index;

}

//自定义键盘处理函数

function keyboard(num, self) {

console.log($(self).html(), "$(self).html()");

var index = getIndex();

if (index <= num) {

var a = $(self).html();

var b = $("#inpt").text();

var c = b + a;

$("#inpt").text(c);

}

// 删除事件

$(".deleteBtn").click(function() {

if ($("#inpt").text().length > 0) {

var a = $("#inpt").text().length - 1;

var b = $("#inpt")

.text()

.substring(0, a);

$("#inpt").text(b);

}

});

// trueBtn keyboardBox

$(".trueBtn").click(function() {

if ($("#inpt").text().length > 0) {

$("#keyboardBox").hide()

}

});

//省份键盘点击事件

$("#provienceBox ul li:not(.other)").click(function() {

var self = this;

keyboard(num, self);

});

//文本键盘点击事件

$("#textBox ul li:not(.other)").click(function() {

var self = this;

keyboard(num, self);

});

</script>

</body>

</html>

//vue 代码其实用for 遍历li元素也是可以的这样获取文本也好获取

<div>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</template>

<style>

.hover:hover{

cursor:pointer

}

#carLicenseBox {

width: 80%;

border: 1px solid #cccccc;

border-radius: 10px;

margin: 0 auto;

padding-bottom: 20px;

overflow: hidden;

background-color: #ffffff;

}

#carLicenseBox .carLicenseTitle {

width: 100%;

height: 70px;

background-color: #478ff1;

text-align: center;

line-height: 70px;

color: white;

font-size: 18px;

}

#carLicenseBox .carLicenseMain {

width: 100%;

height: 160px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

#carLicenseBox .carLicenseMain ul {

width: 100%;

height: 36px;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

}

#carLicenseBox .carLicenseMain ul li {

width: 26px;

height: 34px;

border: 2px solid #cccccc;

text-align: center;

line-height: 34px;

float: left;

margin-right: 8px;

}

#carLicenseBox .carLicenseMain ul li:last-of-type {

margin: 0;

}

#carLicenseBox .carLicenseMain ul li.active {

border: 2px solid #478ff1;

}

#carLicenseBox .carLicenseMain ul li.xinnengyuan {

background-size: 100% 100%;

border: 2px dashed #cccccc;

}

#carLicenseBox .submitBtn {

width: 80%;

height: 45px;

background-color: #478ff1;

border: none;

border-radius: 6px;

text-align: center;

line-height: 45px;

color: white;

font-size: 20px;

margin-left: 10%;

}

#keyboardBox {

width: 50%;

position: absolute;

bottom: 0px;

left: 0px;

z-index: 999;

}

#keyboardBox .provienceBox,

#keyboardBox .textBox {

width: 100%;

background-color: #d0d5d9;

padding-top: 10px;

padding-bottom: 4px;

}

#keyboardBox .provienceBox ul,

#keyboardBox .textBox ul {

width: 100%;

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

margin-top: 10px;

}

#keyboardBox .provienceBox ul:first-of-type,

#keyboardBox .textBox ul:first-of-type {

margin-top: 0px;

}

#keyboardBox .provienceBox ul li,

#keyboardBox .textBox ul li {

width: 40px;

height: 40px;

border-radius: 6px;

text-align: center;

line-height: 40px;

float: left;

background-color: #ffffff;

}

#keyboardBox .provienceBox ul .changeContentBtn,

#keyboardBox .provienceBox ul .deleteBtn,

#keyboardBox .textBox ul .changeContentBtn,

#keyboardBox .textBox ul .deleteBtn {

width: 40px;

height: 40px;

background-color: #acb3bb;

text-align: center;

line-height: 40px;

}

* {

margin: 0;

padding: 0;

}

ul li {

list-style: none;

}

body {

background-color: #f3f3f3;

}

.fl {

display: block;

float: left;

}

.fr {

display: block;

float: right;

}

</style>

export default {

data(){

return{

keyboardBox:true,

provienceBox:true,

textBox:false,

key_box:""

}

methods:{

provienceBoxclick(e){

console.log(e,'eeeeeeeeeeee')

if(e.toElement.localName != 'li'){

return

}

var a = e.target.innerText

console.log(a,'======a')

if(a == 'ABC'){

this.textBox = true

this.provienceBox = false

} else if (a == '删除'){

console.log(this.key_box.length,'-------')

this.key_box = this.key_box.substring(0, this.key_box.length-1)

} else {

if (this.key_box.length <= 5) {

var key = this.key_box

this.key_box = key + a;

}

text_box(e){

if(e.toElement.localName != 'li'){

return

}

var a = e.target.innerText

if(a == "删除"){

console.log(this.key_box.length,'-------')

var cc = '123456'

this.key_box = this.key_box.substring(0, this.key_box.length-1)

console.log(this.key_box,'==========')

// this.key_box = this.key_box.substring(0, this.key_box.length)

} else if(a == "确定"){

this.keyboardBox = false

} else if(a == "返回"){

this.textBox = false

this.provienceBox = true

} else{

if (this.key_box.length <= 5) {

var key = this.key_box

this.key_box = key + a;

}

</script>

使用jq或者 vue 编写车牌控件

猜你喜欢