How to replace newline with comma in input using 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
-->

score 5 · Answer 1 · answered Jan 23 '12 at 18:05

5

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/

answered Jan 23 '12 at 18:05

arthur

950
1
5
18

+1 It works, it is basically the hack described in the SO question I linked. But isn't it cleaner to use a `textarea`? – kapa Jan 23 '12 at 18:13
1

Yes it is! ^^ However, I think it's also cleaner to use an input text instead of a textarea if the field must be a single line text, isn't it? – arthur Jan 23 '12 at 18:20
Hmm, I like this method the best but it doesn't seem to work with IE9. Haven't tested in 7 or 8. Any ideas? – maček Jan 23 '12 at 20:46

score 4 · Accepted Answer · edited May 23 '17 at 12:17

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

`textarea` for the win. Thank you! – maček Jan 23 '12 at 18:04 — maček, Jan 23 '12 at 18:04

score 0 · Answer 3 · answered Jan 23 '12 at 18:00

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.

How to replace newline with comma in input using jQuery?

I have an input

I am currently trying this jQuery

The problem

Sing along on jsFiddle

3 Answers3