div模擬textarea實現高度自增加

 

 

H5提供了一個屬性 contenteditable ,使得div充當文本輸入再也不是夢想css

 

如下是div實現文本輸入的簡單demovue

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

css樣式spa

#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中的內容code

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

而後在 methods 中獲取就好啦blog

onDivInput(e){
      console.log(e.target.innerHTML)
}
相關文章
相關標籤/搜索