Gmail-style Email Address Input Plugin - jQuery GmailTagsInput

GmailTagsInput is a really small jQuery plugin for creating a Gmail-style tags input that enables the user to type multiple valid email addresses in an input field.

Features:

• Addes multiple email address by pressing 'enter' key.
• Removes email addresses by clicking 'x' button.
• Removes existing email addresses by pressing 'back' key.
• Validates email addresses your user typed.

How to use it:

1. Place the jQuery GmailTagsInput plugin's stylesheet in the head section of the document.

<link rel="stylesheet" href="taginput.css">

2. The required HTML structure for the gmail tags input.

<div class="emailtag">
  <div id="tags">
    <input type="text" value="">
  </div>
</div>

3. Place jQuery JavaScript and the jQuery GmailTagsInput plugin's stylesheet at the bottom of the document. Done.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="taginput.js"></script>

4. Override the default CSS to create your own styles.

#tags {
  border:1px solid #ccc;
  padding:5px;
}

#tags > span {
  display:block;
  float:left;
  color:rgba(0, 0, 0, 0.71);
  background:rgba(128, 128, 128, 0.43);
  padding:5px;
  padding-right:25px;
  margin:4px;
}

---

This awesome jQuery plugin is developed by poshan11. For more Advanced Usages, please check the demo page or visit the official website.