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)
}