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.
- 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;
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()
MIT © 2020