javascript - how to make a html input expand when the text inside is larger then the input itself - Stack Overflow

admin管理员组

文章数量:1277898

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

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

• javascript
• jquery
• html
• css
• user-input

Share Improve this question Follow edited Aug 31, 2016 at 17:20 Henrique Almeida Marini asked Aug 31, 2016 at 13:30 Henrique Almeida MariniHenrique Almeida Marini 7711 gold badge11 silver badge77 bronze badges 1

• stackoverflow./questions/7168727/… – Pawan Commented Aug 31, 2016 at 13:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

Here's an example https://jsfiddle/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?.

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

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

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

    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>

本文标签：