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
Introduction to using MySQL commands to create, delete, and query indexes
MySQL database tables can create, view, rebuild a...
Detailed explanation of Linux system software installation commands based on Debian (recommended)
Introduction to Debian Debian in a broad sense re...
CSS realizes corner cutting + border + projection + content background color gradient effect
Simply use CSS to achieve all the effects of corn...
MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)
1. Time difference functions (TIMESTAMPDIFF, DATE...
Detailed explanation of html printing related operations and implementation
The principle is to call the window.print() metho...
Summary of MySQL slow log related knowledge
Table of contents 1. Introduction to Slow Log 2. ...
How to change the terminal to a beautiful command line prompt in Ubuntu 18
I reinstalled VMware and Ubuntu, but the command ...
How to write HTML head in mobile device web development
Copy code The code is as follows: <head> &l...
MySQL Null can cause 5 problems (all fatal)
Table of contents 1. Count data is lost Solution ...
Summary of 3 minor errors encountered during MySQL 8.0 installation
Preface In the past, the company used the 5.7 ser...
In-depth understanding of MySQL long transactions
Preface: This article mainly introduces the conte...
About the problem of no virtual network card after VMware installation
1 Problem description: 1.1 When VMware is install...
CSS3 realizes the website product display effect diagram
This article introduces the effect of website pro...
.NETCore Docker implements containerization and private image repository management
1. Introduction to Docker Docker is developed in ...
Software Testing - MySQL (VI: Database Functions)
1.MySQL functions 1. Mathematical functions PI() ...