首页 > 解决方案 > 如何将每个电子邮件地址装箱?[Javascript]

问题描述

如何获取输入的每个电子邮件地址?一切正常,除了输入中的设计

在邮箱中看起来像这样,而不是 html 格式:

<span class="emBox">hello@world.org</span>, <span class="emBox">stack@overflow.org</span>, 

javascript:

    var textarea = $('#emails');

     textarea.on({
    keyup: function(e) {
        if (e.which === 188) check();
    },
    blur: check    
});

function check() {
    var val  = $.trim(textarea.val()),
        err  = '';

    if (!val.length) {
        err = 'No input ?';
        return;
    }

    var emails   = val.split(','),
        notvalid = [],
        temp     = [];

    $.each(emails, function(_,mail) {
        mail = $.trim(mail);
        if ( mail.length ) {
            var m = mail.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
            if (m) {
                temp.push('<span class="emBox">' + m + '</span>');
            }else{
                temp.push(mail);
                notvalid.push(mail)
            }
        }else{
            temp.push(mail);
        }
        if (notvalid.length) err = 'Not valid emails : ' + notvalid.join(', ');
    });

    $('#error').html(err);
    textarea.val((temp.length ? temp : '' + emails + "").join(', '));
    }

例子:

在此处输入图像描述

演示

标签: javascripthtml

解决方案


好吧,您所做的只是在文本区域内插入纯文本

要将这些呈现为 HTML,请拥有一个容器 div:

<div id="container"></div>

并在 div 的 innerHTML 中插入 span:

var div = document.getElementById("container");
div.innerHTML = (temp.length ? temp : '' + emails + "").join(', '));

推荐阅读