粘贴到输入框中，以换行符或逗号分隔

Question

我正在编写Chrome浏览器扩展程序以接收网址列表并使用chrome.download API下载其目标，例如较轻的Firefox版本DownThemAll。我确定我已经使用过您可以粘贴输入的网站和应用，并将其处理为单独的行：

^{与此类似但不需要添加按钮}

^{这是keep.google.com上的列表条目，它在按Enter键时分割，但不会分割为粘贴的内容。列表项可以是多行字符串}

由于我无法找到这种行为的任何例子，我想知道我是如何做到最好的，并且希望这里可能有一些先例我无法做到找到。

我目前的想法是使用textarea，并在检测时添加HTML5 <input type="url">元素（因为这些automatically validate the string as a URL）。 <input>不支持多行，并将其删除，因此必须使用textarea。

我最初的想法是使用onpaste或onkeydown({comma or newline})。我认为这是一个更好的解决方案，而不仅仅是听取元素的任何变化（我无法看到这种方法会遗漏的任何东西）。对于onpaste，textarea将使用RegEx split作为/\n|,/g，并且除了此数组中的最后一个元素之外的所有元素都将成为<input>个元素（最后一个剩余的textarea）。

在我开始之前/之后将这些放在一起时，我只是好奇是否有任何明智的想法或更早的例子 - 任何事情都会受到赞赏。

P.S。没有JQuery PLZ！

Answer 1

嗯，即使以前从未被问到这个问题，这种情况也有所下降，并且有点普遍和有用......我的代码是为那些寻找相同解决方案的人做的：

function pasteIn(e) {
    txt = document.querySelector('#txtin');
    setTimeout(function(){
        temparray = []; tabUrls = [];
        temparray.push(txt.value.replace(/,\s|\r|\f/g,'\n').replace(/\n{2,}/g,'\n').split('\n'));
        for (k=0;k<temparray[0].length;k++) {
            tabUrls.push(temparray[0][k]);
        }
        URLn = tabUrls[tabUrls.length-1];
    if (!isURL(URLn)) {
      (URLn == '' || URLn == ' ' || URLn == '\t') ? txt.value = null :  txt.value = URLn;
      tabUrls.pop([tabUrls.length]);
    }
    else txt.value = null;
    urlHolder = document.createElement('div');
    document.body.appendChild(urlHolder);
    for (i=0;i<tabUrls.length;i++) {
        urlbox = document.createElement('input');
        urlbox.type = 'url';
        urlbox.value = tabUrls[i];
        document.querySelector('#main').insertBefore(urlbox,document.querySelector('textarea'));
    }
    }, 0);
}

function enterUp(e) {
    if (e.keyCode === 13) {
        console.log("Logging this one");
        pasteIn();
    }
}

...

document.querySelector('textarea').addEventListener('paste', pasteIn, false);
document.querySelector('textarea').addEventListener('keyup', enterUp, false);

它出现在GitHub上here并在this browser extension中使用。

我对最佳做法比对任何旧版本更感兴趣，所以如果有人想要添加/批评此问题，请将此问题保持开放。