Multiple lines of input in

Question

I have this text input in a form:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

I am trying to get it to take multiple lines of input. The width and height make the box to be bigger, but the user can enter text all (s)he wants yet it fills one line only.

How do I make the input more like a textarea?

score 908 · Accepted Answer · edited Sep 01 '16 at 15:12

908

You need to use a textarea to get multiline handling.

<textarea name="Text1" cols="40" rows="5"></textarea>

edited Sep 01 '16 at 15:12

lambda

3,295
1
26
32

answered Jun 07 '11 at 08:28

Ólafur Waage

68,817
22
142
198

9

Yes, but, `textarea` doesn't support the `pattern` attribute. So darn. – toddmo Oct 12 '15 at 19:17
hmmmm, what. Im looking for multiple insert for type text. why this people ask this ques. – Fai Zal Dong Dec 23 '16 at 03:41
@AlexH your comment is **very** important and helpful indeed, thanks. – Nick Louloudakis Jan 24 '17 at 13:22
2

what I don't like about this is that in JQuery, you can't set textarea value using `val()`. You have to `append` to it. :( – Malcolm Salvador Jul 28 '17 at 01:25
@AlexH: You could remove your comment and add it again if you want to alter anything. – Els den Iep Nov 28 '18 at 13:59

Álvaro González · Answer 2 · 2020-01-08T15:41:47.860

78

You can't. At the time of writing, the only HTML form element that's designed to be multi-line is <textarea>.

edited Jan 08 '20 at 15:41

answered Jun 07 '11 at 08:26

Álvaro González

142,137
41
261
360

score 69 · Answer 3 · answered Dec 04 '13 at 13:30

69

It is possible to make a text-input multi-line by giving it the word-break: break-word; attribute. (Only tested this in Chrome)

answered Dec 04 '13 at 13:30

Sté

771
5
2

1

Thanks! I noticed that Chrome was allowing multiple lines for inputs, which I totally didn't want to, and the reason was word-break which was inherited from the body element – rap1ds Nov 12 '14 at 14:12
7

Looks good in Chrome 39 and Safari 8.0.2, but not Firefox 34 in my brief testing. :( http://jsfiddle.net/msybs9g7/ – Jeremy Wadhams Dec 18 '14 at 22:47
27

This solution is outdated and not supported in most browsers anymore. Use instead – Dror Bar Jul 06 '20 at 13:54

score 63 · Answer 4 · answered Jun 20 '13 at 14:53

63

Use the textarea

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

don't leave any space between the opening and closing tags Or Else This will leave some empty lines or spaces.

answered Jun 20 '13 at 14:53

themightysapien

8,309
2
17
15

Thanks, I was wondering if the height would work instead of rows. – ideaztech Jan 10 '22 at 15:11

score 38 · Answer 5 · edited Jul 28 '23 at 02:06

38

If you need Multiline Textarea with Auto Height Increase feature, You can use following simple javascript,

function auto_height(elem) {  /* javascript */
    elem.style.height = '1px';
    elem.style.height = `${elem.scrollHeight}px`;
}

.auto_height { /* CSS */
  width: 100%;
}

<textarea rows="1" class="auto_height" onInput="auto_height(this)"></textarea>

edited Jul 28 '23 at 02:06

David Stögmüller

3
2

answered Mar 27 '20 at 08:29

Prasad Gayan

1,424
17
26

1

Thanks. I modified this and used it in my react textarea – Cuado Oct 08 '21 at 10:46
2

P.S you want to add overflow: hidden to the textarea, or else it will add the extra height few letters before the actual needed one. – Art3mix Jan 26 '22 at 17:35
1

For me this caused the textarea to slightly increase in height when you start typing. A workaround is to set padding to 0 and restore it after setting the height: https://codepen.io/mrexodia/pen/LYdrBqM – mrexodia Aug 08 '22 at 20:37
Probably nered a `ResizeObserver` too for if the window is size changed – run_the_race Mar 05 '23 at 02:51
in react.js I applied it and it worked. – KD.S.T. Aug 25 '23 at 19:21

score 21 · Answer 6 · answered Jun 07 '11 at 08:27

21

Check this:

http://www.w3.org/TR/html401/interact/forms.html#h-17.7

The TEXTAREA element creates a multi-line text input control

answered Jun 07 '11 at 08:27

Matías Fidemraizer

63,804
18
124
206

score 14 · Answer 7 · answered Apr 21 '18 at 09:48

14

You should use textarea to support multiple-line inputs.

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

answered Apr 21 '18 at 09:48

Osanda Deshan

1,473
3
14
30

score 8 · Answer 8 · edited Feb 13 '22 at 16:05

Use <div contenteditable="true"> (supported well) with storing to <input type="hidden">.

HTML:

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

jQuery:

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});

score -5 · Answer 9 · edited Feb 13 '22 at 16:03

-5

If you're using React, you could use the 3rd-party UI library MUI. It has a custom proprietary <Input> element with a multiline option.

As LSE commented, ultimately it gets rendered as <textarea>.

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

edited Feb 13 '22 at 16:03

Kalnode

9,386
3
34
62

answered Jun 10 '20 at 02:32

Alan

9,167
4
52
70

From the documentation : `The multiline prop transforms the text field into a element.`. So even though it looks like an <input/>, it's rendering a <textarea>. – LSE Nov 11 '21 at 01:05

score -9 · Answer 10 · answered Feb 02 '22 at 17:49

-9

If you don't need to edit it, you can use a

<span>text here</span>

It will expand with the text.

answered Feb 02 '22 at 17:49

ThePrince

818
2
12
26

This would remove the input element completely; doesn't help at all. – Kalnode Feb 13 '22 at 15:59

Multiple lines of input in

10 Answers10

Linked

Related