基于客户要求，方便用户操作，要求在输入车牌号的时候能有个车牌号的控件，用户可以直接点击需求分析：事件：1.键盘的弹出 和关闭，2.键盘切换（中英文）3.获取选中的数据 4.大于6个字符禁止继续点击样式：键盘文字陈列样式jq方法：点击键盘时获取所在的li 获取值添加到文本框中vue：思路基本同上坑：在vue绑定事件获取目标元素时，有可能获取的是父元素或者其他元素，此时的i...
基于客户要求，方便用户操作，要求在输入车牌号的时候能有个车牌号的控件，用户可以直接点击
需求分析：
事件：1.键盘的弹出 和关闭，2.键盘切换（中英文）3.获取选中的数据 4.大于6个字符禁止继续点击
样式：键盘文字陈列样式
jq方法：点击键盘时获取所在的li 获取值添加到文本框中
vue：思路基本同上
坑：在vue绑定事件获取目标元素时，有可能获取的是父元素或者其他元素，此时的innerhtml不一定是正确的数据
解决方案：获取目标元素是，查看自己想要数据与其他数据的不同点，用这个不同点进行排他
比如本项目中：想要获取的数据正好都是li标签的数据，目标元素不是li则不执行下面的事件
小知识：
字符串的操作：a = a.substring(开始的索引，结束的索引)可以对字符进行截取，或者去除某一段
贴上代码：
代码有点繁琐，可按需进行删改
// jq代码 记得引入jq文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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 u
最低0.47元/天 解锁文章
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
