how to make a html input expand when the text inside is larger then the input itself

Question

I have a input (html element) and sometimes the input (text) from the user is larger then the width of the input (html element) is there a way to make the input (html element) auto grow when the user is typing?

Obs. Better if made only with css

-------------------------------------EDIT 1-----------------------------------

I've made a JSfiddle, and as you can see the text is cropped when you enter to much text. I'm now trying to make it work with <span contenteditable="true" >

http://stackoverflow.com/questions/7168727/make-html-text-input-field-grow-as-i-type — Pawan, Aug 31 '16 at 13:33

score 6 · Accepted Answer · edited May 23 '17 at 10:29

6

If you need a no javascript/jquery solution I would recommend you to use contenteditable div instead of input element

Here's an example https://jsfiddle.net/sohelansari/631uzco9

Or if you want to use input element only, then unfortunately a pure css solution is not possible. You can write a jquery plugin, may be something like this -> Is there a jQuery autogrow plugin for text fields?.

edited May 23 '17 at 10:29

Community

1
1

answered Aug 31 '16 at 13:55

shinobi

2,511
1
19
27

Is there a way to remove the bounding box that appears when you click on the span? – Henrique Almeida Marcomini Aug 31 '16 at 17:27
@HenriqueAlmeidaMarcomini yes you can. I have updated the fiddle in my answer. – shinobi Aug 31 '16 at 18:45
1

Your method worked like a charm. Althrough I belive css is supposed to handle that. Got my vote and the right answer – Henrique Almeida Marcomini Aug 31 '16 at 18:52
there's any way to add a placeholder on this approach ? @shinobi – Felipe Quirós Jun 15 '17 at 16:45
@FelipeQuirós There is no direct way to do that unfortunately. You will have to use a bit of work around with a placeholder div and some javascript to achieve that. – shinobi Jun 18 '17 at 07:29

score 1 · Answer 2 · answered Aug 31 '16 at 13:33

1

<span contenteditable="true" style="display: inline-block; border: solid 1px black; min-width: 50px; max-width: 200px"></span>

answered Aug 31 '16 at 13:33

bootle

23
5

1

Hi bootle; your code might be correct, but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems. – Vince Bowdren Aug 31 '16 at 14:09

score 1 · Answer 3 · edited Jan 28 '21 at 20:10

1

Try adding oninput="this.size = this.value.length" to your input tag.

<input
  type="text"
  oninput="this.size = this.value.length"
/>

edited Jan 28 '21 at 20:10

Zsolt Meszaros

21,961
19
54
57

answered Jan 28 '21 at 18:38

Joseph Abbey

333
3
7

But how does it skips to the next line? after adding an specific width, this doesnt seem to fix the problem. – Non404 May 02 '23 at 12:59

score -1 · Answer 4 · answered Aug 31 '16 at 13:42

    function copy_data(val){
     var a = document.getElementById(val.id).value
     document.getElementById("text_to").value=a
    }    
</script>
</head>
<TEXTAREA ID="text_from" style="height:100px; width:600px;">

</TEXTAREA>

<TEXTAREA ID="text_to" style="height:100px; width:600px;">

</TEXTAREA>
<button onclick=copy_data(text_from)>Copy</button>

how to make a html input expand when the text inside is larger then the input itself

4 Answers4