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

Preview:

Description:

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
emailsInput.add(email);

5. Remove an email from the input.

emailsInput.remove(email);

6. Get email addresses.

emailsInput.getValue();
emailsInput.getValue({ 
  includeInvalid: true // include invalid email addresses
})

7. Possible options:

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