Is it possible to disable textarea's multiline option?

Question

Of course, I can use standard html text box, but I need text area for some reason.

So, is it possible to disable textarea's multiline option?

Answer 1

You can set the size of your textarea using the cols and rows attributes and make it non-resizable in CSS but you can't prevent the user from adding more than one line. Even if the area is just too small, a scrollbar will appear and let them write as many lines as they want.

If you really need to get just one line, I suggest setting the rows attribute to 1 and checking if the input has a single line with Javascript.

In html:

<textarea name="a"  cols="5" rows="1" ></textarea>

In CSS:

textarea{
    resize: none; 
    #You can use resize: horizontal if you just want to disable vertical resize
}

Still, I'd suggest using an <input type="text" ... /> Why do you want to avoid it?

Answer 2

You can keep all the text on a single line by settings rows="1" on the <textarea>, like the other answers have suggested, and then applying the following CSS to the text area:

resize: none;
white-space: nowrap;
overflow-x: scroll;

This CSS will prevent the single row from wrapping, while still making the keeping the whole line visible by providing a scroll bar to navigate any text that overflows the visible area.

Answer 3

Yes, it is possible using input event to remove all new-line characters every time a user inputs something.

<textarea oninput="this.value = this.value.replace(/\n/g,'')"></textarea>

Or in a more civilized way:

html

<textarea id="ta"></textarea>

js

document.getElementById('ta').addEventListener('input', function(e){
    this.value = this.value.replace(/\n/g,'')
});

Demo on JSFiddle

Answer 4

You can use wrap="off" attribute in textarea to be displayed in a single line.

<textarea wrap="off"></textarea>