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
Vue.js manages the encapsulation of background table components
Table of contents Problem Analysis Why encapsulat...
express project file directory description and detailed function description
app.js: startup file, or entry file package.json:...
What does input type mean and how to limit input
Common methods for limiting input 1. To cancel the...
Install mysql offline using rpm under centos 6.4
Use the rpm installation package to install mysql...
Sharing experience on MySQL slave maintenance
Preface: MySQL master-slave architecture should b...
CSS web page responsive layout to automatically adapt to PC/Pad/Phone devices
Preface There are many devices nowadays, includin...
Quickly solve the problems of incorrect format, slow import and data loss when importing data from MySQL
If you want to solve the slow problem once and fo...
CSS3 analysis of the steps for making Douyin LOGO
"Tik Tok" is also very popular and is s...
HTML tag default style arrangement
html, address,blockquote,body, dd, div,dl, dt, fie...
How to configure domestic sources in CentOS8 yum/dnf
CentOS 8 changed the software package installatio...
A brief discussion on the application of Html web page table structured markup
Before talking about the structural markup of web...
How to find and delete duplicate records in MySQL
Hello everyone, I am Tony, a teacher who only tal...
Detailed explanation of ssh password-free login configuration method (pictures and commands)
First, let me explain that what we want to do is ...
The difference between br and br/ in HTML
answer from stackflow: Simply <br> is suffic...
Detailed explanation of how to pass password to ssh/scp command in bash script
Install SSHPASS For most recent operating systems...