I have contenteditable input field on my web page. What do I need to do to make it transform multi-line text into single-line, for example just like google does if you copy large amount of text into the search field?

Example - I copy such text:

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

And when I paste it into my contenteditable input field, I want to get:

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

-> entire text in one row

I have contenteditable input field on my web page. What do I need to do to make it transform multi-line text into single-line, for example just like google does if you copy large amount of text into the search field?

Example - I copy such text:

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

And when I paste it into my contenteditable input field, I want to get:

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

-> entire text in one row

• javascript
• jquery
• html
• contenteditable
• input-field

• Replace the line break characters by null – Ahs N Commented Jul 22, 2015 at 21:04
• 1 this question is horribly written and shows no effort. -1 – 1252748 Commented Jul 22, 2015 at 21:10
• I give +1 because it is near the top of my search results and exactly answers my question...scratches my itch, if you will. – kenneth558 Commented Feb 7, 2021 at 4:23

4 Answers 4

Use the following CSS on the element:

white-space:nowrap;

This is how I did it:

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

Have a look at the full JSFiddle code demo

Use a text input. This is single line text field and will automatically remove line-breaks.

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

If you must use a textarea then you can easily format its value to remove tabs and line-breaks with a little bit of JavaScript:

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

eg: http://jsfiddle/z2rmxj4j/

As its not good form to put your scripts inline here's a little example that listens for a keyup event on all textareas that have the class '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>

See https://developer.mozilla/en/docs/Web/HTML/Element/Input for more info on the input types.

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

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

alert(text);