Vanilla js implementation of emails input: a component to help fill emails in.
Click here for a live demo (there is a global emailsInput
object to play with) or here to look some examples.
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)
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"]
Adds an email to the input
emailsInput.add('yet-another@email.com')
Removes an email from the input
emailsInput.remove('yet-another@email.com')
Unmounts the component from the dom, and cleans up all handlers:
emailsInput.destroy()
Author: vloth
Demo: https://vloth.github.io/emails-input/
Source Code: https://github.com/vloth/emails-input
#javascript