高动态可扩展的输入框

.flexable-textarea{位置：相对；溢出：隐藏；字体大小：28px；行高：48px；填充：0；.edit-textarea{box-sizing:border-box;字体大小：继承；行高：继承；空白：预包装；溢出包装：中断词；显示：块；宽度：100%；高度：自动；最小高度：48px；}.simulate-textarea{box-sizing:border-box;位置：绝对；左：0；顶部：0；z-指数：-1；不透明度：0；宽度：100%；高度：自动；最小高度：48px；字体大小：继承；行高：继承；空白：预包装；溢出包装：中断词；你可能会问为什么不直接获取textarea的高度，还要做一个隐藏的div容器再复制值？因为textarea的特点是可以拉伸，但是不会自己收缩。设置样式height:auto输入很多行后删除几行。它的高度是不会变化的，所以需要用其他容器获取scrollHeight，曲线救国。.优点：兼容性好缺点：1.部分浏览器设置高度时有卡顿的感觉。2.如果组件先隐藏再显示，需要手动调用check方法，不够干净。2.用div替代textarea.flexable-输入{大纲：无；用户选择：文本；光标：文本；宽度：100%；字体大小：28px；行高：48px；空白：预包装；溢出包装：中断词；&:empty::before{内容:attr(占位符);颜色：#999；}}上周上班在设计图上看到了这样一个textarea框。只有底线没有高度，也就是说输入框的高度不是固定的，是由输入的内容决定的。想好这个设计后，立马去找度娘。网上主流的解决方案有两种：监听输入事件获取textarea的滚动高度，调整style属性contenteditable使height:autodiv可以编辑内容，替换textarea1。通过事件调整高度.flexable-textarea{位置：相对；溢出：隐藏；字体大小：28px；行高：48px；填充：0；.edit-textarea{box-sizing:border-box;字体大小：继承；行高：继承；空白：预包装；溢出包装：中断词；显示：块；宽度：100%；高度：自动；最小高度：48px；}.simulate-textarea{box-sizing:border-box;位置：绝对；左：0；顶部：0；z-指数：-1；不透明度：0；宽度：100%；高度：自动；最小高度：48px；字体大小：继承；行高：继承；空白：预包装；溢出包装：中断词；你可能会问为什么不直接获取textarea的高度，还要做一个隐藏的div容器再复制值？因为textarea的特点是可以拉伸，但是不会自己收缩。设置样式height:auto输入很多行后删除几行。它的高度是不会变化的，所以需要用其他容器获取scrollHeight，曲线救国。.优点：兼容性好缺点：1.部分浏览器设置高度时有卡顿的感觉。2.如果组件先隐藏再显示，需要手动调用check方法，不够干净。2.用div替代textarea.flexable-输入{大纲：无；用户选择：文本；光标：文本；宽度：100%；字体大小：28px；行高：48px；空白：预包装；溢出包装：中断词；&:empty::before{内容:attr(占位符);颜色：#999；}}代码更简单，没有之前方案的缺点。唯一的缺陷是点击不够灵敏，div经常得不到焦点，所以加了点击事件。