THEMETRIAL

Advanced Multiple Emails Input Component In JavaScript

Author:lhstraathof
Views Total:0 views
Official Page:Go to website
Last Update:May 17, 2021
License:MIT

Preview:

Advanced Multiple Emails Input Component In JavaScript

Description:

An advanced email input component that allows you to insert multiple email addresses in an email box just like tags.

How to use it:

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

<script src="https://www.cssscript.com/dist/meimei-lib.min.js"></script>

2. Create a container to hold the email input.

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

3. Initialize the component and you’re done.

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

4. Set the placeholder for the email input.

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

5. Callback functions.

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

6. Apply custom classes to the email 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 methods.

// 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({});


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.