自定义实现文本域的自适应高度的调节

569 阅读1分钟

写在前面,之前根据需求设计。需要在用户输入内容的时候,textarea标签能够自动识别的高度,然后自动增加高度。

尝试

原来是想通过html的contenteditable属性设置为true,来实现添加内容后,可以自动实现高度增加,不出现滚动条。

结果

由于div无法识别一些换行符号和一些回车的转义,所以展示的内容效果与客户端返回的内容存在差异,故该方案是暂时不可行的。

当前的实现

通过自动计算换行符号,与换行符号区间内评论的字数来确定当前的文本的总行数。然后动态的去设置当前的textarea的文本框的rows的行数。

补充

因为后面在开发的时候,发现一个css的属性设置后。html元素可以去自动识别一些特殊意义的转义符,这样便可以自动实现换行。

css =》 white-space:pre-line。

contenteditable="true" 配合 css属性的white-space pre-line实现文本域编辑的自适应

写在最后,人生在勤,不索而获。