Morioh
Login
dotNET Questions

dotNET Questions

4 years ago

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

Emails Input

Vanilla js implementation of emails input: a component to help fill emails in.

screenshot

Click here for a live demo (there is a global emailsInput object to play with) or here to look some examples.

Goals

  • vanilla js, zero dependency, no module bundlers, polyfills, libraries or frameworks;
  • works in IE 11 and latest versions of Chrome, Safari, Firefox, and Edge;
  • automated tests using jsdom;

API

EmailsInput

Mounts EmailsInput in the node:

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

Optional config arguments:

Key Description Default Argument
placeholder the placeholder of the input add more people …
triggerKeyCodes key codes to trigger the creation of a chip [44,13]
pasteSplitPattern* split pattern to be used when pasting a content /(?:,

*(creating chips on paste only works on browsers that support the clipboard api, ie: it doesn’t support IE11)

getValue

Gets an array of emails. By default, only valid emails will be returned, but an optional argument can be supplied to retrieve all emails:

  const emails = emailsInput.getValue()
  // ["vloth@mail.com", "abc@def.com", "another@email.com"]

  const emails = emailsInput.getValue({ includeInvalid: true })
  // ["vloth@mail.com", "invalid.user", "abc@def.com", "another@email.com"]

add

Adds an email to the input

  emailsInput.add('yet-another@email.com')

remove

Removes an email from the input

  emailsInput.remove('yet-another@email.com')

destroy

Unmounts the component from the dom, and cleans up all handlers:

  emailsInput.destroy()

Download Details:

Author: vloth

Demo: https://vloth.github.io/emails-input/

Source Code: https://github.com/vloth/emails-input

#javascript

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