Как заменить символ новой строки запятой при вводе с помощью 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

Вы можете перенаправить событие в текстовую область, а затем получить значение вставки, которое будет содержать символы \ 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 так, чтобы он выглядел как ввод, отключить изменение размера и сделать так, чтобы он имел только одну строку.

jsFiddle Demo с textarea

Answer 3

Как насчет прозрачной текстовой области над входом? Размер, чтобы соответствовать. После вставки разбивать переводы строк должно стать намного проще. в фокусе поднимите текст до уровня текстовой области, чтобы манипулировать символами новой строки и тому подобным, а при размытии отправьте его обратно на вход. Если ведение ввода не требуется, замените его на текстовую область в стиле текстового поля.