UI component to convert any div into a multiple emails input
MIT License
multi-emails-input is a small library to convert a div into a multiple emails input, basically if you have any div
and you want to convert it into a multi emails input this lib is best to do that.
This lib is written in pure JavaScript and could be converted to an npm package if needed.
You can start by adding the JavaScript file into html.
<script src="<PATH_TO_LIB>/emails-input.js"></script>
Also add the CSS file into your head tag
<link rel="stylesheet" src="<PATH_TO_LIB>/emails-input.css" />
You can wrap your div selector with the provided function as follow:
<div id="emails-input"></div>
<script>
const inputContainerNode = document.querySelector('#emails-input');
const emailsInput = EmailsInput(inputContainerNode);
</script>
This will convert the normal div into a multi emails input container.
Enter
, entering comma ,
, or by losing focus on the input field blur
event.X
sign in each block.[email protected]
, [email protected]
) they should be converted into multiple blocks.EmailsInput
function as shown in the example above returns an object of 2
getEmailsList
: an function that returns an array of valid emails as shown in the element.addEmail
: a function that you can send an email and it will be added to the list.ie11
.limitEmailsToDomain
: is an option to define what email is valid and what is not so for example if you provided this option as gmail
then any email other than gmail will be considered as invalid.invalidEmailClass
: is an option to provide a different class for the invalid emails that overrides the default style in case the user needs to.validEmailClass
: is an option to provide a different class for the valid emails same as the invalid one.const emailsInput = EmailsInput(inputContainerNode, {
limitEmailsToDomain: 'gmail',
invalidEmailClass: 'custom-invalid-email',
validEmailClass: 'custom-valid-email',
});