检测文本何时被输入到文本区域中，并相应地进行更改。

Question

我有一个，用户可以在其中输入或粘贴其他人的电子邮件地址，并在按下提交按钮后将它们发送邀请。每个电子邮件必须用逗号分隔并在表单提交之前有效 - 验证由<a href="http://jqueryvalidation.org/" rel="nofollow noreferrer">jQuery Validate plugin</a>和<a href="https://dev59.com/GGkv5IYBdhLWcg3wxzyA">multiemail method</a>处理。</br><div class="h-2"></div>问题</br><div class="h-2"></div>有些人直接从他们的电子邮件客户端粘贴电子邮件地址，这些电子邮件通常是以奇怪的格式 - 包含实际电子邮件之前的名称和姓氏，或者电子邮件被包装在<>中。例如：<code>"The Dude" <[e-mail]>, "The Dudette" <[e-mail]></code> 问题</br><div class="h-2"></div>我想做的是<a href="https://dev59.com/2GYq5IYBdhLWcg3wfgrd">使用jquery从批量文本中提取所有电子邮件地址</a>，但我无法将此代码片段集成到我的<textarea>中 - 我不知道从哪里开始。</br><div class="h-2"></div>我该如何使用上述答案中的代码，在键入逗号或移开焦点后从<code>textarea</code>中提取每个输入的电子邮件？因此，如果我粘贴了<code>"The Dude" <[e-mail]></code>并在其后键入了<code>,</code>或切换了焦点，则输入的值将更改为<code>[e-mail]</code>。

- dTilen

---

类似的问题可以在这里查找答案：https://dev59.com/2GYq5IYBdhLWcg3wfgrd - Sunil Verma

他在引用同一个问题。实际上，他的问题应该是“如何将事件处理程序绑定到文本区域”。 - kasper Taeymans

在逗号后重新考虑验证...您不会在最后一个电子邮件后按逗号键..您不想在更改后例如2秒钟内进行验证吗？ - Dropout

@Dropout 是的，这就是为什么我还需要焦点移动到其他地方时的验证 :) - dTilen

Answer 1

您可以使用事件处理程序检测textarea（或其他输入字段）何时更改。Jquery支持多个事件（请查看此处http://api.jquery.com/category/events/）。在这种情况下，我应该使用keyup事件来触发extractEmails函数。这样您的提取将是“实时”的。但是，也可以通过捕获模糊或更改事件来实现。

使用keyup事件处理程序: http://jsfiddle.net/kasperfish/9hLtW/5/

$('#text').on('keyup',function(event) {
    emails=extractEmails($(this).val());
    $("#emails").text(emails);
});

function extractEmails (text)
{
    return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
}

- kasper Taeymans

Answer 2

我猜测你需要的是这样的内容：

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(m);
            }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(', '));
}

FIDDLE

- adeneo

Answer 3

这将按照您的要求，在失去焦点或输入逗号时，将输入的文本转换为电子邮件：

function extractEmails (text)
{
    return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
}

$("#emailtext").on('keypress blur', function(e) {

    if (e.which === 44 || e.type =="blur")
    {
        $('#emails').text(extractEmails($("#emailtext").val()));
    }
});

这是一个fiddle示例：

http://jsfiddle.net/Mj2KM/

- B Cotter