Adding Multiple Emails like Gmail
This input accpets multiple emails and when an email is valid it adds some styles around that email
Demo , type a valid email and press Enter or , or space keys to see it in action
Enter Emails
Hit Enter or type , or hit space after you enter an email
To remove an email from the list, just click on it.
HTML
<article class="fullScreen80Flex contactForm ">
<div class="formContainer">
<div class="heading ">
<h1> Enter Emails </h1>
<p>Hit <kbd>Enter</kbd> or type <kbd>,</kbd> or hit <kbd>space</kbd> after you enter an email</p>
</div>
<div id="contact-us" class="form ">
<div id="emailsList">
<ul>
</ul>
</div>
<div id="contactForm">
<p data-error="email" class="errors"></p>
<input value="" placeholder="youare@awesome.com" type="text" id="email">
</div>
<p id="emailJson"></p>
</div>
</div>
</article>JavaScript
getEmails() gives you the json array of emails
class AddEmails {
constructor() {
this.emailInput = document.getElementById("email");
this.emailListContainer = document.querySelector("div#emailsList ul");
}
// some regex copied from internet
isValidEmail(val) {
let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(val);
}
getEmails() {
var emails = [];
document.querySelectorAll("div#emailsList ul li").forEach((ele) => {
emails.push(ele.innerHTML.replace(/ /g, ""));
});
console.log(JSON.stringify(emails));
}
init() {
this.emailInput.onkeyup = (e) => {
if (e.keyCode == 0 || e.keyCode == 32 || e.keyCode == 13 || e.keyCode == 188) {
let val = e.target.value.trim().replace(/ /g, "").replace(/,/g, "");
if (this.isValidEmail(val)) {
console.log(val);
let li = document.createElement('li');
li.innerHTML = val;
this.emailListContainer.appendChild(li);
this.emailInput.value = "";
// removing email from the list
li.addEventListener("click", function (e) {
e.target.parentNode.removeChild(e.target);
});
this.getEmails();
return;
}
}
}
}
}
var addEmails = new AddEmails();
addEmails.init();
var demoEmails = "youare@awesome.com";
var myVar = setInterval(myTimer, 200);
var i = 0;
function myTimer() {
if (i == (demoEmails.length)) {
myStopFunction();
return;
}
document.getElementById("email").value = document.getElementById("email").value + demoEmails[i];
i++;
}
function myStopFunction() {
clearInterval(myVar);
document.getElementById("email").dispatchEvent(new KeyboardEvent('keyup', { 'key': 'enter' }));
}
CSS
body {
margin: 0;
background: white;
color: black;
}
.fullScreen80Flex {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
}
article.contactForm div.formContainer {
color: black;
margin: 2em auto 2em auto;
padding: 1em 0 1em 0;
overflow: hidden;
width: 600px;
background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
border-radius: 10px;
}
article.contactForm div.formContainer div.heading {
margin: 0 auto 0 auto;
width: 100%;
letter-spacing: 0.1em;
font-weight: bold;
text-align: center;
color: black;
}
article.contactForm div.formContainer div.heading h1 {
font-size: 1.5em;
letter-spacing: 0.2em;
color: white;
font-weight: bolder;
}
article.contactForm div.formContainer div.heading p {
margin: 0 auto 0 auto;
width: 90%;
color: black;
}
article.contactForm div.formContainer div.heading kbd {
background-color: rgba(0, 0, 0, 0.637);
padding: 0.3em;
color: white;
}
article.contactForm div.formContainer div.form {
margin: 3em auto 0 auto;
width: 100%;
}
article.contactForm div.formContainer div.form div#contactForm {
margin: 0 auto 0 auto;
width: 98%;
}
article.contactForm div.formContainer div.form label {
display: block;
width: 80%;
margin: 0.5em auto 0.5em auto;
outline: none;
color: white;
letter-spacing: 0.1em;
font-weight: bolder;
font-size: 1.2em;
}
article.contactForm div.formContainer div.form input {
display: block;
width: 80%;
margin: 1em auto 1em auto;
outline: none;
color: black;
padding: 0.8em 0 0.8em 0.6em;
border: none;
border-radius: 5px;
transition: all 0.2s linear;
font-weight: bolder;
}
article.contactForm div.formContainer div.form input:hover,
article.contactForm div.formContainer div.form input:active,
div.form textarea:hover,
div.form textarea:active {
transition: all 0.2s linear;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
div.form button {
outline: none;
border: none;
margin: 2em auto 2em auto;
padding: 1.4em;
cursor: pointer;
letter-spacing: 0.4em;
display: block;
width: 60%;
text-align: center;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
color: white;
background-color: navy;
border-radius: 5px;
transition: all linear 0.2s;
}
div.form button:hover,
div.form button:active {
background-color: rgba(0, 0, 128, 0.678);
transition: all linear 0.2s;
}
div#emailsList {
width: 90%;
margin: 0em auto 0em auto;
}
#emailsList ul {
padding: 0;
}
#emailsList ul li {
display: inline-block;
padding: 0.5em;
margin: 0.2em;
background-color: navy;
color: white;
font-size: 0.9em;
box-shadow: 0px -1px 5px -1px rgba(0, 0, 0, 0.75);
cursor: pointer;
border-radius: 0.8em;
animation-name: appear;
animation-duration: 0.4s;
transition: all 0.2s linear;
}
@keyframes appear {
from {
transform: scale(0.6, 0.6);
}
to {
transform: scale(1, 1);
}
}
#emailsList ul li:hover {
animation-name: removeAnimation;
animation-duration: 0.4s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
background-color: red;
}
@keyframes removeAnimation {
from {
transform: scale(0.9, 0.9);
}
to {
transform: scale(1, 1);
}
}
#emailJson {
margin: 0.1em auto 0.1em auto;
width: 80%;
text-align: left;
color: white;
}
@media (max-width:1020px) {
article.contactForm div.formContainer {
width: 98%;
}
}ALTERNATE TITLES