如何使用jQuery在输入中用逗号替换换行符？答案

【问题标题】：How to replace newline with comma in input using jQuery?如何使用jQuery在输入中用逗号替换换行符？
【发布时间】：2012-01-23 17:28:44
【问题描述】：

我有意见

<input>

当有人将多行文本粘贴到输入中时，我需要将换行符（\r、\n 和 \r\n）和制表符 \t 替换为逗号 ,。大多数情况下，当用户复制一列或一行时，输入将来自 Microsoft Excel 或 Apple Numbers。

我目前正在尝试这个 jQuery

$(function(){
    // jQuery paste event. how trendy!
    $('input').on('paste', function(e){
        var e = $(this);
        setTimeout(function(){
            e.val( $.trim(e.val()).replace(/\s+/g, ',') );
        }, 0);
    });
});

问题

他们的电子表格中的某些单元格中可能包含空格，因此 /\s+/g 将过于宽泛。但是，/[\r\n\t]+/g 不起作用。事实上，我认为 jQuery 在删除换行符之前甚至无法访问输入的值。

在 jsFiddle 上一起唱歌

我提供了一个 jsfiddle 预期的输入和输出

<!-- sample input, copy below this line --
one
2
hello world
foo bar
m3000
-- end copy -->

<!-- output should look like
one, 2, hello world, foo bar, m3000
-->

【问题讨论】：

标签： javascript jquery regex clipboard jquery-events

【解决方案1】：

您可以将事件重定向到文本区域，然后获取包含 \n 字符的粘贴值：

$(function(){
    $('input').on('paste', function(e){
        var target = $(e.target);
        var textArea = $("<textarea></textarea>");
        textArea.bind("blur", function(e) {
            target.val(textArea.val().replace(/\r?\n/g, ', ') );
            textArea.remove();
        });
        $("body").append(textArea);
        textArea.focus();
        setTimeout(function(){
            target.focus();
        }, 10);
    });
});

你可以在这里试试：http://jsfiddle.net/dE3At/

【讨论】：

+1 它有效，它基本上是我链接的 SO 问题中描述的黑客。但是使用textarea 不是更干净吗？
是的！ ^^ 但是，如果字段必须是单行文本，我认为使用输入文本而不是文本区域也更干净，不是吗？
嗯，我最喜欢这种方法，但它似乎不适用于 IE9。没有在 7 或 8 中测试过。有什么想法吗？

【解决方案2】：

恐怕这是不可能的（不乱搞）。

当您粘贴的数据设置为输入值时，换行符将被删除，因此您无法通过读取输入值来检索原始版本。
您无法在onpaste 事件中获取粘贴的数据本身（IE 拥有专有的clipboardData.getData()，但there is no not-hacky cross-browser way）。

我建议你使用textarea，这样你就可以维护这些换行符并对它们做任何你想做的事情。您可以设置textarea 的样式，使其看起来像一个输入，禁用调整大小并使其只有一行。

jsFiddle Demo with textarea

【讨论】：

textarea 赢得胜利。谢谢！

【解决方案3】：

在输入上设置一个透明的文本区域怎么样？调整大小以匹配。粘贴后，拆分换行符应该会容易得多。在焦点上，将文本提升到 textarea 级别以操作换行符等，在模糊时，将其发送回输入。如果不需要维护输入，则将其替换为样式类似于文本框的文本区域。

【讨论】：