当内部文本大于输入本身时如何使html输入扩展答案

【问题标题】：how to make a html input expand when the text inside is larger then the input itself当内部文本大于输入本身时如何使html输入扩展
【发布时间】：2017-01-08 03:04:31
【问题描述】：

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

观察。如果只用 css 制作会更好

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

我创建了一个JSfiddle，正如您所见，当您输入太多文本时，文本会被裁剪。我现在正在尝试使其与<span contenteditable="true" >

一起使用

【问题讨论】：

stackoverflow.com/questions/7168727/…

标签： javascript jquery html css user-input

【解决方案1】：

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

【讨论】：

你好；您的代码可能是正确的，但在某些上下文中它会做出更好的答案；例如，您可以解释这个提议的更改如何以及为什么会解决提问者的问题，可能包括指向相关文档的链接。这将使它对他们更有用，对正在寻找类似问题的解决方案的其他网站读者也更有用。

【解决方案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>

【讨论】：

【解决方案3】：

如果您不需要 javascript/jquery 解决方案，我建议您使用 contenteditable div 代替输入元素

这是一个例子 https://jsfiddle.net/sohelansari/631uzco9

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

【讨论】：

有没有办法去掉点击span时出现的边界框？
@HenriqueAlmeidaMarcomini 是的，你可以。我已经更新了答案中的小提琴。
你的方法很有效。虽然我相信 css 应该可以处理这个问题。得到我的投票和正确答案
有什么方法可以在这种方法上添加占位符？ @shinobi
@FelipeQuirós 不幸的是，没有直接的方法可以做到这一点。您将不得不使用占位符 div 和一些 javascript 来实现这一点。

【解决方案4】：

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

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

【讨论】：