使用div模擬自適應高度的textarea

textarea文本域及自適應高度

textarea文本域用來作多行輸入，大部分狀況下都能嗎，知足咱們的需求，可是textarea不能想div元素那樣隨着內容的增多高度自適應，而固定高度又會宣示出滾動條，在移動端這樣的顯示很醜。

div模擬textarea文本域及高度自適應

能夠使用div 的contentEditable屬性，使用戶可以編輯元素的內容。而div又能自適應高度，這樣就解決了textarea的不足

<!-- react -->
<div contentEditable={true} className="text-box" ref={(ref)=>{ this.textEdit = ref }}>
    贊成。
</div>
複製代碼

這時在div中輸入的文本包含div,br等dom元素，能夠使用css屬性 -webkit-user-modify 設置用來控制用戶可否對頁面文本進行編輯

屬性值	描述
read-only	內容只讀
read-write	內容可讀寫，富文本
read-write-plaintext-only	內容可讀寫，但粘貼內容中的富文本格式（如文本的顏色、大小，圖片等）會丟失。內容相似於以純文本顯示

React直接使用contentEditable問報錯，需以下使用：

componentDidMount () {
        this.textEdit.setAttribute('contentEditable', true)
    }

    render() {
        return (
            <div> <div className="text-box" ref={(ref)=>{ this.textEdit = ref }}> 贊成。 </div> </div>
        )
    }
複製代碼