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

Question

I have an input

<input>

When someone pastes multi-line text into the input, I need the newlines ( \\r , \\n , and \\r\\n ) and tabs \\t replaced with a comma , . Most of the time, the input will be coming from Microsoft Excel or Apple Numbers when a user copies a column or a row.

I am currently trying this 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);
    });
});

The problem

Some cells in their spreadsheet might have spaces in them so /\\s+/g is going to be too broad. However, /[\\r\\n\\t]+/g isn't working. In fact, I don't think jQuery even has access to the input's value before the newlines are being removed.

Sing along on jsFiddle

I've provided a jsfiddle with expected inputs and outputs

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

You can redirect the event to a textarea and then get the paste value which will content the \\n characters:

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

You can try it here: http://jsfiddle.net/dE3At/

Answer 2

I am afraid this is not possible (without hacking around).

• The newlines will be removed when your pasted data is set as the value of the input, so you cannot retrieve the original version by reading the value of the input.
• You cannot get the pasted data itself in the onpaste event (IE has the proprietary clipboardData.getData() , but there is no not-hacky cross-browser way ).

I suggest you use a textarea , so you can maintain those newlines and do whatever you want to them. You can style the textarea to look like an input, disable resizing and make it have only one row.

jsFiddle Demo with textarea

Answer 3

What about having a transparent textarea over the input? Size it to match. Once pasted, breaking up newlines should get a lot easier. on focus, raise the text to the textarea level to manipulate your newlines and such, and on blur, send it back to the input. If maintaining the input is not necessary, then replace it with the textarea styled to look like a textbox.