Как создать однострочное поле для ввода текста?

Question

У меня есть допустимое поле ввода на моей веб-странице. Что мне нужно сделать, чтобы преобразовать многострочный текст в однострочный, например, как это делает Google, если вы копируете большой объем текста в поле поиска?

Пример - я копирую такой текст:

Это случайный текст, lalalalalalala
и это многострочный,
но это только то, что я хочу.

И когда я вставляю его в свое поле ввода, я хочу получить:

Это случайный текст, lalalalalalala и многострочный, но это только то, что я хочу.

-> весь текст в один ряд

Answer 1

Используйте следующий CSS для элемента:

white-space:nowrap;

Answer 2

Вы должны использовать тег ввода следующим образом: <input type="text"/>,

Answer 3

Используйте текстовый ввод. Это однострочное текстовое поле, которое автоматически удаляет разрывы строк.

<input name="mySingleLineTextField" type="text" />

Если вы должны использовать textarea тогда вы можете легко отформатировать его значение, чтобы удалить вкладки и переносы строк с помощью небольшого количества JavaScript:

<textarea name="myMultiLineTextFieldWithFormattingRemoved" onchange="this.value=this.value.replace(/([\n\r\t]+)/g, ' ')"></textarea>

например: http://jsfiddle.net/z2rmxj4j/

Так как не стоит помещать ваши сценарии в ряд, вот небольшой пример, который слушает keyup событие на всех textareas которые имеют класс 'nobreaks':

(function(){
    //select all textareas having the class of 'nobreaks'
    var elems = document.querySelectorAll("textarea.nobreaks");
    //for each element in our collection
    for(i=0; i<elems.length; i++){
        //attach a function to the keyup event
        elems[i].onkeyup = function(){
            this.value=this.value.replace(/([\n\r\t\s]+)/g, ' ');
        }
    }
})()

pre {color:grey}
input, textarea {display:block; width:300px; margin:10px;}
.nobreaks {}
.nowrap {white-space:nowrap;}

<pre>This is Random text, lalalalalalala
and it's multi-line,
but that's just now what I want.
</pre>

<input type="text" value="Will replace line-breaks, text cannot wrap." />
<textarea>Default. 
Wont replace line-breaks and text can wrap.</textarea>
<textarea class="nobreaks">Will replace line-breaks but text can still flow/wrap.</textarea>
<textarea class="nobreaks nowrap">Will replace line-breaks and prevent the text from wrapping.</textarea>

См. https://developer.mozilla.org/en/docs/Web/HTML/Element/Input для получения дополнительной информации о типах ввода.

Answer 4

Вот как я это сделал:

$('#paste').click(function(){
    $(this).html('');
});
$('#paste').focusout(function(){
    $(this).html($(this).text().replace('/n', ''));
});

Посмотрите полную демонстрацию кода JSFiddle

Answer 5

var text = "This had line\n breaks\n in it.";

text = text.replace(/(\r\n|\n|\r)/gm,"");

alert(text);