Tag Input Like Email Address Editor In JavaScript

Preview:

Description:

A Vanilla JavaScript-powered email editor that allows you to enter multiple email addresses in one input field just like a tagging system.

More Features:

• Email validation.
• Add email addresses programmatically.
• Auto converts emails into tags by pressing Enter/Comma or when the input field loses focus.

See Also:

• Multiple Email Input Field In jQuery – multi-Emails

How to use it:

1. Import the Email Editor’s JavaScript and Stylesheet into the HTML document.

<link rel="stylesheet" href="/dist/emailsEditor.css" />
<script src="/dist/emailsEditor.bundle.js"></script>

2. Create an empty DIV element for the email input.

<div id="emails-input"></div>

3. Initialize the email editor. That’s it.

const myEmailInput = document.querySelector('#emails-input');
const emailsInput = EmailsInput(inputContainerNode);

4. Add a new email address to the editor.

emailsInput.add('[email protected]');

5. Get the current email addresses.

emailsInput.getEmails();