如何使用jQuery在輸入中用逗號替換換行符？

Question

我有一個輸入

<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
-->

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() ，但沒有非黑客的跨瀏覽器方式）。

我建議你使用textarea ，這樣你就可以維護這些換行符並對它們做任何你想做的事情。 您可以將textarea為看起來像一個輸入，禁用調整大小並使其只有一行。

帶有textarea jsFiddle 演示

Answer 3

在輸入上有一個透明的 textarea 怎么樣？ 調整大小以匹配。 粘貼后，拆分換行符應該會容易得多。 在焦點上，將文本提升到 textarea 級別以操縱換行符等，並在模糊時將其發送回輸入。 如果不需要維護輸入，則將其替換為樣式看起來像文本框的 textarea。