Multiple Emails Input In Vanilla JavaScript – emails-input.js

Category: Image | August 18, 2020
Views Total:6,165 views
Official Page:Go to website
Last Update:August 18, 2020


Multiple Emails Input In Vanilla JavaScript – emails-input.js


A framework-agnostic JavaScript library to generate an email input that accepts multiple email addresses and validates the emails if is valid.

How to use it:

1. Insert the necessary JavaScript and CSS files into the HTML page.

<link rel="stylesheet" href="css/lib/email.css" />
<script src="js/lib/utils.js"></script>
<script src="js/lib/emails-input.js"></script>

2. Create an empty element that serves as the container for the email input.

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

3. Initialize the library on the container element you created and done.

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

4. Add email addresses to the email input.

// expose instance for quick access in playground
window.emailsInput = emailsInput

5. Remove an email from the input.


6. Get email addresses.

  includeInvalid: true // include invalid email addresses

7. Possible options:

const emailsInput = EmailsInput(inputContainerNode,{
      placeholder: 'add more people ...',
      triggerKeyCodes: [44,13],
      pasteSplitPattern: /(?:,| )+/

You Might Be Interested In:

Leave a Reply