檢測何時將文本輸入到文本區域並相應地進行更改

Question

我有一個textarea ，用戶可以輸入或粘貼其他人的電子郵件地址，並在按下“提交”按鈕后向他們發送邀請。 在提交表單之前，每封電子郵件必須用逗號分隔並且有效 - 驗證由jQuery Validate插件和multiemail方法處理 。

問題

有些人直接從他們的電子郵件客戶端粘貼電子郵件地址，這些電子郵件通常是一種奇怪的格式 - 在實際電子郵件之前包含姓名和姓氏，或者電子郵件包含在<>中。 例如： "The Dude" <the.dude@gmail.com>, "The Dudette" <thedudette193@gmail.com>

題

我想要做的是使用jquery從批量文本中提取所有電子郵件地址 ，但是我在將這段代碼與我的textarea一起工作時遇到了問題 - 我不知道從哪里開始。

我怎樣才能使用上面答案中的代碼提取輸入逗號后輸入到textarea每封電子郵件，或者當焦點從textarea移開時？ 因此，如果我粘貼"The Dude" <the.dude@gmail.com>並輸入,或者切換焦點后，輸入的值將更改為the.dude@gmail.com 。

Answer 1

您可以使用事件處理程序檢測textarea何時更改（或其他輸入字段）。 Jquery支持多個事件（請查看http://api.jquery.com/category/events/ ）。 在這種特殊情況下，我應該使用keyup事件來觸發extractEmails函數。 這樣你的提取將是“活的”。 但是，通過捕捉模糊或改變事件也是可能的。

使用keyup eventhandler

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);
}

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

小提琴

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

這是小提琴：

http://jsfiddle.net/Mj2KM/