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

Question

我有一个输入

<input>

如果有人将多行文字粘贴到输入中，我需要换行（\r，\n和\r\n），并用逗号代替\t标签{ {1}}。大多数情况下，当用户复制列或行时，输入将来自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无效。事实上，我不认为jQuery甚至可以在删除换行符之前访问输入值。

在jsFiddle上唱歌

我提供了jsfiddle预期输入和输出

/[\r\n\t]+/g

Answer 1

您可以将事件重定向到textarea，然后获取将包含\ 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/

Answer 2

我担心这是不可能的（没有黑客攻击）。

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

我建议您使用textarea，这样您就可以维护这些换行符并对其执行任何操作。您可以将textarea设置为输入样式，禁用调整大小并使其只有一行。

jsFiddle Demo with textarea

Answer 3

在输入上有透明的textarea怎么样？调整大小以匹配。粘贴后，分解换行应该会变得容易多了。在焦点上，将文本提升到textarea级别以操纵你的换行等等，并在模糊时，将其发送回输入。如果不需要保持输入，则将textarea替换为样式文本框。