检测文本何时输入到文本区域并相应更改答案

【问题标题】：Detect when text is entered into the textarea and change it correspondingly检测文本何时输入到文本区域并相应更改
【发布时间】：2013-10-04 11:00:34
【问题描述】：

我有一个textarea，用户可以在其中输入或粘贴其他人的电子邮件地址，并在按下提交按钮后向他们发送邀请。每封电子邮件必须用逗号分隔，并且在提交表单之前有效 - 验证由 jQuery Validate plugin 和 multiemail method 负责。

问题

有些人直接从他们的电子邮件客户端粘贴电子邮件地址，这些电子邮件通常采用奇怪的格式 - 在实际电子邮件之前包含姓名和姓氏，或者电子邮件被包裹在中。例如： "The Dude" <the.dude@gmail.com>, "The Dudette" <thedudette193@gmail.com>

问题

我想做的是Extract all email addresses from bulk text using jquery，但我在将这段代码集成到我的textarea 时遇到问题 - 我不知道从哪里开始。

在键入逗号或焦点从textarea 移开后，如何使用上述答案中的代码提取输入到textarea 的每封电子邮件？因此，如果我粘贴"The Dude" <the.dude@gmail.com> 并在其后键入, 或切换焦点，输入的值将更改为the.dude@gmail.com。

【问题讨论】：

类似问题在这里查看答案stackoverflow.com/questions/14440444/…
他指的是同一个问题。事实上，他的问题一定是“如何将事件处理程序绑定到文本区域”
在逗号后重新考虑验证.. 最后一封电子邮件后您没有按逗号键.. 您不想在更改后例如 2 秒验证它吗？
@Dropout 是的，这就是为什么我还需要 when-focus-is-moved-elsewhere 验证:)

标签： javascript jquery forms jquery-validate

【解决方案1】：

我猜是这样的：

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

【讨论】：

【解决方案2】：

您可以使用事件处理程序检测文本区域（或其他输入字段）何时发生更改。 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);
}

【讨论】：

【解决方案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()));
    }
});

这是小提琴：

http://jsfiddle.net/Mj2KM/

【讨论】：