Example code for inputting the license plate number and province abbreviation in html
|
The principle is to first write a div with a button, and then automatically adapt to generate a keyboard according to the size of the screen. The effect is as follows:
The specific implementation code is as follows, so I won’t go into details.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
<style>
/* *{
font-family:"bold";
} */
.content{
width:265px;
height:353px;
position:absolute;
top:50%;
left:50%;
height:50%;
margin:-177px 0 0 -132px;
}
.label_province{
position:absolute;
top:6px;
left:10px;
}
.input_province{
position:absolute;
text-align:center;
width:26px;
left:1px;
top:6px;
border:none;
outline:0;
font-family:"bold";
}
.input_font{
font-size:18px;
color:#333333;
}
.input_font_plate{
font-size:14px;
color:#333333;
}
.input_platenumber_base{
position:absolute;
text-align:center;
width:34px;
top:13px;
border:none;
outline:0;
}
.input_city{
left:44px;
}
.label_platenumber{
font-size:14px;
color:#999;
width:265px;
text-align:center;
margin-top:29px;
border:0;
outline:0;
}
.input_park{
font-size:14px;
color:#666;
width:265px;
text-align:center;
border:0;
outline:0;
}
.label_btntext_confirm{
position:absolute;
top:12px;
font-size:16px;
width:214px;
left:0;
}
.label_btn_text{
text-align:center;
color:#FFF;
/* font-weight: bold; */
}
.key_province{
font-size:17px;
position:absolute;
left:2.5px;
top:8px;
border:0;
width:28px;
text-align:center;
font-family:"bold";
}
</style>
</head>
<body>
<div class="content">
<div style="margin-top:15px;">
<div style="height:40px;width:100%;position:relative;top:0;">
<img alt="" src="../img/bg_platenumber.png" width="257" height="40" style="position:relative;left:4px;">
<label class="label_province" for="id_province">
<img alt="" src="../img/border_province.png" width="28.5" height="28.5">
<input class="input_province" type="text" readonly="readonly" maxlength="1" id="id_province" onclick="provinceSelect();" value="冀">
</label>
<input id="id_city" class="input_platenumber_base input_platenumber_base" style="left:45px;" type="text" onkeyup="value=value.replace(/[^[AZ]+$/g,'')" maxlength="1">
<input id="id_plate1" class="input_platenumber_base input_platenumber_base" style="left:81px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input id="id_plate2" class="input_platenumber_base input_platenumber_base" style="left:117px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input id="id_plate3" class="input_platenumber_base input_platenumber_base" style="left:153px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input id="id_plate4" class="input_platenumber_base input_platenumber_base" style="left:189px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
<input id="id_plate5" class="input_platenumber_base input_platenumber_base" style="left:225px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
</div>
<input type="text" readonly="readonly" class="label_platenumber" value="Please bind your license plate number">
</div>
<div style="margin-top:91px;">
<div>
<input id="id_park" type="text" readonly="readonly" class="input_park" placeholder="Please select your parking lot" onclick="parkSelect();">
</div>
<div>
<hr id="username_devision" size=1 color=#ececec style="FILTER: alpha(opacity=100,finishopacity=0);margin-left:22px;margin-right:22px;"/>
</div>
</div>
<div style="margin-top:90px;position:relative;top:0;left:26px;width:214px;">
<label for="confirm">
<img id="img_confirm" width="214" height="39" alt="" src="../img/bg_btn_enable.png">
</label>
<label for="confirm" class="label_btntext_confirm label_btn_text">Confirm</label>
<button type="submit" id="confirm" name="button" style="display:none;" onclick="confirm();">Confirm</button>
</div>
</div>
<div id="id_keyboard_province" style="display:none;">
</div>
<script type="text/javascript">
var provinces = new Array("京","沪","浙","江苏","粤","鲁","山西","冀",
"Henan", "Sichuan", "Chongqing", "Liaoning", "Jilin", "Heilongjiang", "Anhui", "Hubei",
"Jin", "Gui", "Yun", "Gui", "Qiong", "Qing", "Xin", "Zang",
"Mongolia", "Ningxia", "Gansu", "Shaanxi", "Fujian", "Gan", "Xiang");
function provinceSelect(){
showProvince();
}
function parkSelect(){
alert("Select parking lot");
}
function confirm(){
alert("OK");
}
function showProvince(){
var screenWidth=window.screen.width;
//Find the number of columns and round down var columns = Math.floor((screenWidth - 9)/42);
//Find the number of rows and round up var rows = Math.ceil(31/columns);
//Calculate the height of the button background, which is the height of each button + interval + top and bottom margins. 48 is the height of each button + the distance to the next button. var key_bg_height = rows*48+16;
var x_space = (screenWidth - 9 - 42*columns)/(columns);
var start_x = 9+x_space;
var start_y = 12;
var keyboard_province = document.getElementById("id_keyboard_province");
keyboard_province.style.position="fixed";
keyboard_province.style.top= (window.screen.height-key_bg_height)+"px";
keyboard_province.style.left=0;
keyboard_province.style.backgroundColor="#f2f2f2";
keyboard_province.style.width="100%";
keyboard_province.style.height=key_bg_height+"px";
//keyboard_province.style.display="block";
keyboard_province.innerHTML = '';
for(var i=0;i<rows;i++){
for(var j=0;j<columns;j++){
var provinceIds = i*columns+j;
if (provinceIds<provinces.length){
var x = 9+(j+1)*x_space+j*42;
var y = 12+i*48;
/* var addHtml = addKeyProvince(x,y,provinceIds);
alert(addHtml); */
$("#id_keyboard_province").append(addKeyProvince(x,y,provinceIds));
}
else{
keyboard_province.style.display="block";
return;
}
}
}
}
function addKeyProvince(x,y,provinceIds){
var addHtml = '<div style="position:absolute;left:'+x+'px;top:'+y+'px;width:42px;height:48px;">';
addHtml += '<label for="id_'+provinceIds+'"><img alt="" width="34" height="38" src="../img/bg_key_province.png"></label>';
addHtml += '<input id="id_'+provinceIds+'" type="text" readonly="readonly" class="key_province" value="'+provinces[provinceIds]+'" onclick="chooseProvince(this.value);">';
addHtml += '</div>';
return addHtml;
}
function chooseProvince(province){
/* alert(province+"======"+provinces[7]); */
document.getElementById("id_province").value=province;
$("#id_keyboard_province").hide();
}
</script>
</body>
</html>This is the end of this article about the sample code for the html license plate number province abbreviation input keyboard. For more relevant html license plate number input keyboard content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Detailed steps for developing Java payment interface for Alipay
>>: Some experience sharing on enabling HTTPS
Recommend
Detailed explanation of the case of dynamically generating tables using JavaScript
Table of contents Preface Implementation ideas Im...
Pitfalls and solutions encountered in MySQL timestamp comparison query
Table of contents Pitfalls encountered in timesta...
Detailed explanation of Bootstrap grid vertical and horizontal alignment
Table of contents 1. Bootstrap Grid Layout 2. Ver...
JavaScript canvas to achieve code rain effect
This article shares the specific code for canvas ...
Detailed introduction to logs in Linux system
Table of contents 1. Log related services 2. Comm...
Solution to MySQL restarting automatically
Preface Recently, a problem occurred in the test ...
MySQL master-slave principle and configuration details
MySQL master-slave configuration and principle, f...
Automatic line breaks in html pre tags
At this time, you can use overflow:auto; (when the...
Detailed explanation of the solution to the problem of automatic disconnection of xshell remote connection
Solution to the problem of automatic disconnectio...
How to redirect to https through nginx load balancing
Copy the certificate and key on the web scp -rp -...
Detailed explanation of for loop and double for loop in JavaScript
for loop The for loop loops through the elements ...
An example of changing traditional replication to GTID replication without stopping business in MySQL 5.7
Due to the advantages of GTID, we need to change ...
Practice of multi-layer nested display of element table
There is a requirement for a list containing mult...
Summary of 11 amazing JavaScript code refactoring best practices
Table of contents 1. Extracting functions 2. Merg...
Detailed explanation of TypeScript 2.0 marked union types
Table of contents Constructing payment methods us...