README

multi-emails-input 是一个将 div 转换为多电子邮件输入的小型库，基本上如果你有任何 div 并且想将其转换为多电子邮件输入，这个库是做这件事的最佳选择。

该库是用纯 JavaScript 编写的，如果需要，可以转换为 npm 软件包。

如何使用？

您可以从将 JavaScript 文件添加到 HTML 开始。

<script src="<PATH_TO_LIB>/emails-input.js"></script>

同时将 CSS 文件添加到您的 head 标签中

<link rel="stylesheet" src="<PATH_TO_LIB>/emails-input.css" />

您可以使用提供的函数将 div 选择器包装起来，如下所示

<div id="emails-input"></div>
<script>
  const inputContainerNode = document.querySelector('#emails-input');
  const emailsInput = EmailsInput(inputContainerNode);
</script>

这将把普通的 div 转换为多电子邮件输入容器。

特性

可以通过按下 Enter 键、输入逗号 , 或通过在输入字段上失去焦点 blur 事件来创建电子邮件块。
可以通过每个块中的 X 符号删除一个块。
粘贴的电子邮件将立即转换为块。（例如，“max@mail.ru，ivan@mail.ru”）它们应该转换为多个块。
无效的电子邮件不会添加到返回的列表中。
重复的电子邮件有不同的样式以供识别，并可被删除。
EmailsInput 函数，如上例所示，返回一个包含 2 个元素的对象
- getEmailsList：一个函数，返回一个包含有效电子邮件的数组，如元素所示。
- addEmail：一个函数，您可以发送一个电子邮件，并将其添加到列表中。
所有代码都提供了 JSDOC，这有助于确定类型。
该库已过测试，在所有浏览器上均运行正常，包括 ie11。

选项

limitEmailsToDomain：是一个选项，用于定义哪些电子邮件是有效的，哪些不是，例如，如果您将此选项提供为 gmail，则除了 gmail 之外的所有电子邮件都将被视为无效。
invalidEmailClass：是一个选项，用于提供无效电子邮件的不同类，以覆盖默认样式，如果用户需要的话。
validEmailClass：是一个选项，用于提供有效电子邮件的不同类，与无效的类似。
示例

const emailsInput = EmailsInput(inputContainerNode, {
  limitEmailsToDomain: 'gmail',
  invalidEmailClass: 'custom-invalid-email',
  validEmailClass: 'custom-valid-email',
});

umer936 / multi-emails-input

维护者

详细信息

README

如何使用？

特性

选项