div模拟textarea实现高度自增加

 

 

H5提供了一个属性 contenteditable ，使得div充当文本输入再也不是梦想

 

如下是div实现文本输入的简单demo

<div id="textarea" contenteditable="true"></div>

css样式

#textarea {
  width: 500px;
  border-bottom: 1px solid #ccc;
  min-height: 40px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  outline: none;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #c4c4c4;
  padding-bottom: 10px;
}

 

 

在vue中如何获取div中的内容

<div id="textarea" contenteditable="true" @input="onDivInput($event)"></div>

而后在 methods 中获取就好啦

onDivInput(e){
      console.log(e.target.innerHTML)
}