CODEWITHSUNDEEP
javascriptjqueryhtmlcssuser-input
Henrique Almeida Marcomini
Henrique Almeida Marcomini

Reputation: 77

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

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" >

Upvotes: 3

Views: 15046

Answers (4)

Joseph Abbey
Joseph Abbey

Reputation: 473

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

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

Upvotes: 1

shinobi
shinobi

Reputation: 2517

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?.

Upvotes: 6

Julfikar Ali
Julfikar Ali

Reputation: 1

    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>

Upvotes: -1

bootle
bootle

Reputation: 23

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

Upvotes: 1

Related Questions