Press "Enter" to skip to content

A JavaScript Library to Create Input Fields That Accept Multiple Email Addresses | MeiMei

MeiMei is an easy-to-use Vanilla JavaScript library to create input fields that accept multiple email addresses. An advanced email inputs component that allows you to insert multiple emails into an email inbox just like tags.

There are lots of component libraries with email inputs, but few focus on multiple email inputs and vanilla js. This library adds multiple possible email input functions to your web application.

How to make use of it:

1. Include the meimei-lib.min.js on the web page.

<script src="dist/meimei-lib.min.js"></script>

2. Create a container to hold the e-mail input.

<div class="emailInput"></div>

3. Initialize the element and also you’re achieved.

var inputContainer = document.querySelectorAll('.emailInput');
var emailsInput = MeiMei(inputContainer);

4. Set the placeholder for the e-mail input.

var emailsInput = MeiMei(inputContainer,{
    placeholder: 'Add More Emails Here...'
});

5. Callback capabilities.

var emailsInput = MeiMei(inputContainer,{
    onAddEntry: function onAddEntry() {
      console.log('add');
    },
    onRemoveEntry: function onRemoveEntry() {
      console.log('remove');
    },
});

6. Apply customized classes to the e-mail input.

var emailsInput = MeiMei(inputContainer,{
    theme: {
      box: "email-box-class",
      input: "input-class",
      chip: "chip-class",
      chipInvalid: "invalid-class",
      cross: "cross-icon-class"
    }
});

7. API strategies.

// add a new email address string
emailsInput.addEntry(emailAddress);

// removes an email address
emailsInput.removeEntry(emailAddress);

// returns an array of email addresses
emailsInput.entryList();

// returns the reference to the input field
emailsInput.inputFieldRef();

// returns the reference to the input container
emailsInput.ref();

// optional settings
emailsInput.optionalProps({});

Options

NameTypeDescriptionDefault
placeholderstringThe placeholder tekst for the input fieldadd more people…
onAddEntryfunctionTriggers after adding an entry 
onRemoveEntryfunctionTriggers after removing an entry 
themeobjectYou can overwrite the default classes with your own theme 

Advanced Multiple Emails Input Component, MeiMei – Multiple Plugin/Github


See Demo And Download

Official Website(lhstraathof): Click Here

This superior jQuery/javascript plugin is developed by lhstraathof. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.