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

Use rows=1 to display only 1 line. you can get further more information from this link

Answer 4

You can set the rows attribute to 1.

It is not possible to disable the multiline

Answer 5

Use this pure JS code and it will not allow user to enter multiple lines in textarea

var textArea = document.getElementsByTagName("textarea")[0];//your desired TextArea
textArea.onkeydown = function (e) {
    if (e.keyCode == 13) { e.preventDefault(); }
};

NOTE: This method will not work if user copies a multi line text and pastes it in the TextArea.

Answer 6

The following jQuery snippet forces textarea to be displayed in a single line.

  $(document).ready(function(){
    $('textarea').each(function(){$(this).attr('rows', 1);});
  });