Native JS to implement login box email prompt
|
This article shares a native JS implementation of a drop-down prompt when entering an email address during registration or login. The effect is as follows:
The implementation code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Native JS to implement login box prompt</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.125 Arial, Helvetica, sans-serif;
}
li {
list-style: none;
}
#login {
width: 252px;
height: 385px;
/* Color background image */
background: url(images/0.jpg) no-repeat;
margin: 20px auto;
position: relative;
}
.detail {
margin: 0 0 5px 30px;
position: relative;
top: 110px;
}
.detail input {
color: #999999;
border: 1px solid #74C8E5;
border-radius: 3px 3px 3px 3px;
height: 15px;
line-height: 14px;
padding: 8px 5px 7px;
width: 184px;
}
#suggest {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
left: 30px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 142px;
visibility: visible;
width: 194px;
z-index: 1;
display: none;
}
.note,
.item {
clear: both;
color: #999999;
cursor: pointer;
font-size: 12px;
height: 20px;
line-height: 20px;
list-style: none outside none;
margin: 0 1px;
padding: 0 5px;
white-space: nowrap;
}
.active {
white-space: nowrap;
clear: both;
color: rgb(153, 153, 153);
cursor: pointer;
font-size: 12px;
height: 20px;
line-height: 20px;
list-style: none outside none;
margin: 0pt 1px;
padding: 0pt 5px;
background: none repeat scroll 0% 0% rgb(232, 244, 252);
}
</style>
<script>
//When the page is loaded window.onload = function () {
//Create constructor var s1 = new Suggest();
//Initialize s1.init();
};
//Constructor function Suggest() {
//Get the user name input box this.oInput = document.getElementById('input1');
//Get the drop-down list prompt box this.oUl = document.getElementById('suggest');
//Get the drop-down list item this.aLi = this.oUl.getElementsByTagName('li');
}
//Add prototype method to the constructor Suggest.prototype = {
// Initialization init: function () {
//When the input changes this.toChange();
//When the cursor moves away this.toBlur();
},
//When the edge continues to trigger changes toChange: function () {
//Add continuous input events and make them compatible with all browsers var ie = !-[1,];
var This = this;
if (ie) {
this.oInput.onpropertychange = function () {
//Prevent the drop-down prompt box from being triggered when the input value is empty in IE if (This.oInput.value == '') {
This.tips();
return;
}
//Show the drop-down list box This.thowUl();
//Show tipsThis.tips();
//Default selection when inputThis.sel(0);
};
} else {
this.oInput.oninput = function () {
//Show the drop-down list box This.thowUl();
//Show tipsThis.tips();
//Default selection when inputThis.sel(0);
};
}
},
//Display the drop-down list box thowUl: function () {
this.oUl.style.display = 'block';
},
//When the cursor moves away, hide the drop-down display box toBlur: function () {
var This = this;
this.oInput.onblur = function () {
This.oUl.style.display = 'none';
};
},
//When inputting, the space inside the prompt changes accordingly tips: function () {
var value = this.oInput.value;
//Define the regular expression for the mailbox (@ plus the value entered after @ plus a space)
var re = new RegExp('@' + value.substring(value.indexOf('@') + 1) + '');
//Initialize the drop-down list //Prevent the drop-down list from being displayed after clearing the input for (var i = 1; i < this.aLi.length; i++) {
this.aLi[i].style.display = 'block';
this.aLi[i].bBtn = true;
}
if (re.test(value)) {
//Get the custom attributes of all li (except the first one)
for (var i = 1; i < this.aLi.length; i++) {
var oEmail = this.aLi[i].getAttribute('email');
//Directly assign a value to the first selected li if (i == 1) {
//Assign the input value to li
this.aLi[i].innerHTML = value;
} else {
if (re.test(oEmail)) {
this.aLi[i].style.display = 'block';
this.aLi[i].bBtn = true;
} else {
this.aLi[i].style.display = 'none';
this.aLi[i].bBtn = false;
}
}
}
} else {
//Get the custom attributes of all li (except the first one)
for (var i = 1; i < this.aLi.length; i++) {
var oEmail = this.aLi[i].getAttribute('email');
//If the obtained oEmail value is empty, it is the first time if (!oEmail) {
//Assign the input value to li
this.aLi[i].innerHTML = value;
} else {
//The content of li is the input value plus its attribute value this.aLi[i].innerHTML = value + oEmail;
}
}
}
},
//Prompt list item selection method sel: function (iNow) {
var This = this;
var arr = [];
//After selecting a prompt, when you re-enter, restore the selected item to the default style for (var i = 1; i < this.aLi.length; i++) {
this.aLi[i].className = 'item';
if (this.aLi[i].bBtn) {
arr.push(this.aLi[i]);
}
}
//When the input content is empty if (this.oInput.value == '') {
//Style is item
arr[iNow].className = 'item';
//When the input content is not empty} else {
//Style is active
arr[iNow].className = 'active';
}
//Add mouse move event to all drop-down tips for (var i = 1; i < arr.length; i++) {
arr[i].index = i;
//When the mouse moves in arr[i].onmouseover = function () {
//Restore the styles of all li to the default style for (var i = 1; i < This.aLi.length; i++) {
This.aLi[i].className = 'item';
}
//Add style to the current option as active
this.className = 'active';
iNow = this.index;
};
//When the mouse is clicked, replace the current prompt option content with the input value arr.onmousedown = function () {
This.oInput.value = this.innerHTML;
};
}
//Add keyboard event document.onkeydown = function (ev) {
// Make the event compatible var ev = ev || window.event;
// if (ev.keyCode == 38) {
if (iNow == 0) {
iNow = arr.length - 1;
} else {
iNow--;
}
for (var i = 1; i < This.aLi.length; i++) {
This.aLi[i].className = 'item';
}
arr[iNow].className = 'active';
//Next} else if (ev.keyCode == 40) {
//When iNow is the last one, assign it a value of 0
if (iNow == arr.length - 1) {
iNow = 0;
} else {
iNow++;
}
// Clear all li styles to default style for (var i = 1; i < This.aLi.length; i++) {
This.aLi[i].className = 'item';
}
//Add active style to the current option arr[iNow].className = 'active';
//Enter} else if (ev.keyCode == 13) {
//Replace the current prompt option content with the input value This.oInput.value = arr[iNow].innerHTML;
//Move the cursor away from the input box and close the drop-down list item This.oInput.blur();
}
};
}
};
</script>
</head>
<body>
<div id="login">
<div class="detail">
<input id="input1" type="text" maxlength="128" placeholder="Email/member account/mobile phone number" autocomplete="off"
node-type="loginname" class="name" tabindex="1" name="loginname">
</div>
<div class="detail">
<input type="password" maxlength="24" placeholder="Please enter your password" node-type="password" class="pass" tabindex="2"
name="password">
</div>
<ul id="suggest">
<li class="note">Please select the email type</li>
<li email="" class="item"></li>
<li email="@sina.com" class="item">@sina.com</li>
<li email="@163.com" class="item">@163.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@126.com</li>
<li email="@vip.sina.com" class="item">@vip.sina.com</li>
<li email="@sina.cn" class="item">@sina.cn</li>
<li email="@hotmail.com" class="item">@hotmail.com</li>
<li email="@gmail.com" class="item">@gmail.com</li>
<li email="@sohu.com" class="item">@sohu.com</li>
<li email="@yahoo.cn" class="item">@yahoo.cn</li>
<li email="@139.com" class="item">@139.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@189.cn</li>
</ul>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Using streaming queries in MySQL to avoid data OOM
>>: HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN
Recommend
How to configure Tomcat and run your first Java Web project on IntelliJ IDEA 2018
1 Download and start Tomcat Go to the official we...
How to hide elements on the Web and their advantages and disadvantages
Example source code: https://codepen.io/shadeed/p...
Linux forced release of occupied ports and Linux firewall port opening method detailed explanation
When installing nginx, mysql, tomcat and other se...
Detailed explanation of Mysql master-slave synchronization configuration practice
1. Introduction I wrote an article before: The pr...
How to make form input and other text boxes read-only and non-editable in HTML
Sometimes, we want the text boxes in the form to b...
CSS3 new layout: flex detailed explanation
Flex Basic Concepts Flex layout (flex is the abbr...
Detailed tutorial on deploying apollo with docker
1. Introduction I won’t go into details about apo...
Vue implementation example using Google Recaptcha verification
In our recent project, we need to use Google robo...
Detailed explanation of Socket (TCP) bind from Linux source code
Table of contents 1. A simplest server-side examp...
Implementation of tomcat deployment project and integration with IDEA
Table of contents 3 ways to deploy projects with ...
How to prevent Vue from flashing in small projects
Summary HTML: element plus v-cloak CSS: [v-cloak]...
JavaScript implements class lottery applet
This article shares the specific code of JavaScri...
ReactJs Basics Tutorial - Essential Edition
Table of contents 1. Introduction to ReactJS 2. U...
Basic application methods of javascript embedded and external links
Table of contents Basic application of javascript...
Five ways to traverse objects in javascript Example code
Table of contents Prepare Five weapons for…in Obj...