Input field that gets taller as you type

Question

I was wonder how I can create a text input that has an auto-adjustable height so that it gets taller to fit your text? For example, if I start typing a paragraph, it expands from a few lines to fit the paragraph.

Here's what I've currently got:

#commenttext {
  width: 413px;
  min-height: 22px;
  max-height: 100%;
  display: inline;
  font-size: 11px;
  color: #777777;
  word-wrap: break-word;
  font-family: "Open Sans", "Tahoma";
  top: 7px;
  position: relative;
  left: 7px;
  padding-left: 7px;
}

<form action="" method="POST">
  <input type="text" id="commenttext">
</form>

But that's just a normal text area.

How can I make that text area get taller as I type more lines? Do I need Javascript?

Use `textarea`. Or you may be able to find some ready-to-use libraries too. — Vivek Jain, Oct 10 '13 at 03:15
Agreed, both `input` and `textarea` need javascript to have a height of `auto` — Zach Saucier, Oct 10 '13 at 03:17
for comments it's better to use textarea with autogrow. It's already good to be K.I.S.S. We all start being stupid on something that we want to try — Drixson Oseña, Oct 10 '13 at 03:23
@ThinkkSo use `textarea`. Saves your time and work, and logically not all web use input tags for comments. — Drixson Oseña, Oct 10 '13 at 03:27

Robbie Wxyz · Accepted Answer · 2013-10-11T06:23:59.147

10

Here's a CSS-only solution: Use a div with contenteditable set to true.

<div contenteditable="true"
    style="width:200px;min-height:20px;border:1px solid #ccc;"></div>

See this JSFiddle for an example.

EDIT: If you want to be able to submit this text, you'll need a little bit of javascript to put it into an input field. Add this to your form:

<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
    <input id="hidden_data" name="data" type="hidden"/>
    <div id="showing_data" contenteditable="true"
        style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
</form>

This will put the contents of the div into a hidden input field so it will be submitted to the server through POST with anything else.

See this (updated) JSFiddle for an example.

edited Oct 11 '13 at 06:23

answered Oct 10 '13 at 03:24

Robbie Wxyz

7,671
2
32
47

There you Go... Mr.Anything is Possible , thanks Alot superscript – ThinkkSo Oct 10 '13 at 03:26
how would i go about if i want it to be a form input or should i put it inside the form elements? – ThinkkSo Oct 10 '13 at 03:28
Nice! I had no idea that was possible. – Josh Crozier Oct 10 '13 at 03:29
1

if I use this how Would I be Able to insert into mysql? – ThinkkSo Oct 10 '13 at 03:32
VERY nice. I also had no idea this was possible. – Charlie74 Oct 10 '13 at 03:37
2

@ThinkkSo: I made it submittable! Let me know if you have any more problems. – Robbie Wxyz Oct 10 '13 at 03:40
@SuperScript I Would Have To Add A Submit Button Right?? – ThinkkSo Oct 10 '13 at 03:42
@ThinkkSo: Yes you will -- hitting enter in the `div` will not submit the form. – Robbie Wxyz Oct 10 '13 at 03:44

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

Take a look at this post here:

Creating a textarea with auto-resize

It has all the code needed (HTML and Javascript) to accomplish what you want.

edited May 23 '17 at 10:33

Community

1
1

answered Oct 10 '13 at 03:17

Charlie74

2,883
15
23

Okay if i do use this way will i be able to fix the textarea input by myself? because if i can i'd rather not use that – ThinkkSo Oct 10 '13 at 03:20
What do you mean by "fix the text area"? When you are using textarea, it actually allows you to resize by dragging the box to the size you want. That happens without any code. If you want the textarea to increase automatically, you'll need some Javascript :) – Charlie74 Oct 10 '13 at 03:22
okay yeah like you said dragging the box size, i dont want to be able to do that i want it to be auto lol – ThinkkSo Oct 10 '13 at 03:24

Input field that gets taller as you type

2 Answers2

Linked