Customizeable VanillaJS email input library. Creates a token on blur, enter and comma and supports pasting comma separated values. Could be easily adapted to work for non-email values.
Download dist/emails-input.js, dist/emails-input.css and import the files into your project.
Add EmailsInput-themed class to the container element to apply theme styles. When omitted, only base styles are
applied for full styling flexibility.
<html>
<head>
<!-- Import styles -->
<link href="emails-input.css" rel="stylesheet" />
</head>
<style>
/* Specify dimensions of container element */
.emails {
width: 30em;
heigth: 10em;
}
</style>
<body>
<!-- Container component with theme styles applied -->
<div class="emails EmailsInput-themed" id="emails-input"></div>
<!-- Import script -->
<script src="emails-input.js"></script>
<!-- Initialize -->
<script>
var container = document.querySelector('#emails-input');
var emailsInput = EmailsInput(container, {
// Options
});
</script>
</body>
</html>- EmailsInput(elem, opts)
Construct an emails input.
- EmailsInput.addValue(value)
Add a value to the list of values.
- EmailsInput.getAllValues() ⇒
Array.<String> Get all values.
- EmailsInput.getValidValues() ⇒
Array.<String> Get valid values.
- EmailsInput.replaceAllValues(values)
Replace all current values by the given values.
- EmailsInput.subscribe(listener)
Subscribe to any changes to the values.
- EmailsInput.unsubscribe(listener)
Unsubscribe listener.
- EmailsInput.init()
(Re)initialize EmailsInput instance. Renders an empty form.
- EmailsInput.reset()
Reset EmailsInput instance.
Unsubscribes listeners and clears values.
Construct an emails input.
| Param | Type | Description |
|---|---|---|
| elem | HTMLElement |
HTML element to be bind the EmailsInput instance to. |
| opts | Object |
Options |
| opts.placeholderText | Number |
Input placeholder text |
Add a value to the list of values.
| Param | Type | Description |
|---|---|---|
| value | string |
The value to be added. |
Get all values.
Get valid values.
Replace all current values by the given values.
| Param | Type | Description |
|---|---|---|
| values | Array.<String> |
The new values |
Subscribe to any changes to the values.
| Param | Type | Description |
|---|---|---|
| listener | function |
Listener function |
Unsubscribe listener.
| Param | Type | Description |
|---|---|---|
| listener | function |
Listener function |
(Re)initialize EmailsInput instance. Renders an empty form.
Reset EmailsInput instance.
Unsubscribes listeners and clears values.
This plugin is developed with Webpack 4 and Babel 7.
- Run dev server:
npm run start - Build:
npm run build - Test:
npm run test