textarea高度自适应-&&-元素属性contenteditable介绍

近期实现的一个笔录页面如上图所示,考虑到笔录内容肯定会超出一行,所以我选择了使用textareas文本输入框,问题在于textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观。

下面分享2种实现textarea高度自适应的做法,一种是利用JS控制textarea的高度,另一种是用div元素来模拟textarea

一、textarea高度自适应

一个有最小高度(设置其rows属性或min-height)的 textarea 标签,当文字增多出现滚动条时,将它的滚动高度scrollHeight赋给height,以达到textarea高度自适应效果

【1】原生JS


  
  

【2】JQuery


  
  

【3】Vue


  
  

二、contenteditable介绍

contenteditable是HTML5新增的全局属性,有true和false两个属性值。用来指定元素内容是否可编辑。

下面是一个简单的示例,创建一个"contenteditable"属性为"true"的div元素,用户就可以编辑其内容了。div元素超出指定width会自动换行,因此不用设置高度自适应

  
用户可以在此编辑文本

你可能感兴趣的:(textarea高度自适应-&&-元素属性contenteditable介绍)