高度自适应的输入框
时间：2023-03-31 00:42:39
CSS
有时候我们需要一个高度可以随着内容自动增加的输入框，但是input显然是不行的，因为input里面的文字没有换行。textarea中的文字是绕行的，但是一旦文字内容超过了它的高度，textarea中就会出现一个烦人的滚动条，非常影响视觉。 那么有没有办法制作一个高度可以随着文字内容自动增加的输入框呢？答案是肯定的，这里有两种方法。方法1 这个方法还是用到了textarea，主要思路是我们把textarea放到一个容器里，在这个容器里放一个隐藏的div（可见性：hidden），监听textarea的输入事件和文本是动态同步的到隐藏的div，以便div可以扩展容器。这时候，将textarea的高度设置为100%，定位到容器的左上角，那么textarea的高度自然就是其中文本内容的高度。可见性是一种CSS属性，用于在不改变文档布局的情况下显示或隐藏元素。它有三个可能的值：可见元素正常显示（默认值）；hidden元素隐藏了，但是其他元素的布局没有改变，相当于让这个元素透明了。如果其子元素设置为visibility:visible，则子元素仍然可见；collapse用于表格的行、列、列组和行组，隐藏表格的行或列，不占用任何空间。
查看示例：https://mxsyx.site/archives/10/#demo-1 大家可能已经注意到，当我们输入文字的时候，输入框的高度明显比文字内容高很多，随着输入文字的增加，高度差会越来越大。这是因为隐藏的div和textarea中的字体大小和行高不同。div中的字体大小和行高比textarea中的大。所以div打开的容器高度自然要高于textarea中文字内容的高度。要解决这个问题，统一它们的字体大小和行高。（注意：div的字体大小和行高默认继承父元素）
查看示例：https://mxsyx.site/archives/10/#demo-2 这样高度就一致了。这种方式虽然可以更好的实现一个自适应性很强的输入框，但是实现起来总感觉比较粗糙。下面的方法显然要简单得多。方法2 div、p、blockquote等元素默认是不可编辑的，但是我们可以将它们的contenteditable属性设置为true，使其可编辑。contenteditable是一个全局属性，用于指示元素是否可以被用户编辑。此属性必须采用以下值之一：true或“空字符串”，表示该元素是可编辑的；false，表示该元素不可编辑。如果未设置此属性，则其默认值将从其父元素继承。
试着输入一段文字：看看示例：https://mxsyx.site/archives/10/#demo-3 是不是很简单？我们也可以使用CSS伪类：empty，:focus，来实现占位符查看示例：https://mxsyx.site/archives/10/#demo-4 如果你使用Vue.js，我们也可以把它打包成一个Vue组件：
