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
iFrame is a great way to use it as a popup layer to cover the background
I have been working on a project recently - Budou ...
Four practical tips for JavaScript string operations
Table of contents Preface 1. Split a string 2. JS...
One question to understand multiple parameters of sort command in Linux
The sort command is very commonly used, but it al...
Solution to mysql error code 1064
If the words in the sql statement conflict with t...
How to add custom system services to CentOS7 systemd
systemd: The service systemctl script of CentOS 7...
Example analysis of mysql non-primary key self-increment usage
This article uses an example to illustrate the us...
Introduction to install method in Vue
Table of contents 1. Globally registered componen...
Implementation and optimization of MySql subquery IN
Table of contents Why is IN slow? Which is faster...
How to implement JavaScript output of Fibonacci sequence
Table of contents topic analyze Basic solution Ba...
An article to understand MySQL master-slave replication and read-write separation
Table of contents introduction 1. MySQL master-sl...
uniapp realizes the recording upload function
Table of contents uni-app Introduction HTML part ...
HTML Code Writing Guide
Common Convention Tags Self-closing tags, no need...
Detailed steps for implementing timeout status monitoring in Apache FlinkCEP
CEP - Complex Event Processing. The payment has n...
Example code for using text-align and margin: 0 auto to center in CSS
Use text-align, margin: 0 auto to center in CSS W...