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()
// ["[email protected]", "[email protected]", "[email protected]"]
const emails = emailsInput.getValue({ includeInvalid: true })
// ["[email protected]", "invalid.user", "[email protected]", "[email protected]"]Adds an email to the input
emailsInput.add('[email protected]')Removes an email from the input
emailsInput.remove('[email protected]')Unmounts the component from the dom, and cleans up all handlers:
emailsInput.destroy()MIT © 2020