当里面的文本比输入本身大时，如何使 html 输入扩展

Question

我有一个输入（html 元素），有时来自用户的输入（文本）大于输入（html 元素）的宽度有没有办法使输入（html 元素）在用户输入时自动增长？

观察。如果只用 css

制作更好

------------------------------------编辑 1------ ----------------------------

我做了一个 JSfiddle，正如您所看到的，当您输入太多文字时，文字会被裁剪。我现在正在尝试让它与 <span contenteditable="true" >

一起使用

Answer 1

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

Answer 2

    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>

Answer 3

如果您需要一个没有 javascript/jquery 的解决方案，我建议您使用 contenteditable div 而不是输入元素

举个例子 https://jsfiddle.net/sohelansari/631uzco9

或者，如果您只想使用输入元素，那么很遗憾，纯粹的 css 解决方案是不可能的。你可以写一个 jquery 插件，可能是这样的 -> Is there a jQuery autogrow plugin for text fields?.

Answer 4

尝试将 oninput="this.size = this.value.length" 添加到您的输入标签。

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

当里面的文本比输入本身大时，如何使 html 输入扩展

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

html

javascript

css

jquery

user-input