html中的contenteditable，他是一個全局屬性，可以大致理解為"可以使一個元素處于可編輯狀態"，像極了textarea，不過還是存在許多不足跟問題，比如沒有change鉤子等，本文不作深入探討?
開胃
使一個div可以進行內容編輯：
<div contenteditable>點擊我進行編輯</div>
image
乍一看，好像很普通，但是它可以解決一個
textarea的一個痛點，那就是可以自適應高度，textarea可不行 ?
正文
假如... 把該屬性加在style元素上呢??，是不是就可以在頁面上直接編寫樣式并且自帶"熱更新"？因此有如下代碼：
<head>
<style contenteditable>
html {
background-color: #f1f1f1;
}
</style>
</head>
然后激動的切到頁面上看效果，發現空空如也：
image
經過一番研究，想要在頁面上編輯style元素，必須要滿足以下兩點：
-
style元素必須放在body元素內 -
style元素要設置display: block;
于是代碼變成了這樣：
<body>
<style contenteditable style="display: block;">
html {
background-color: #fff;
}
</style>
</body>
于是就有了以下場景：
image
缺點
存在的缺點很明顯，我也很刻意的去避開，那就是代碼無法換行，因為回車后，內容會新增div元素，破壞了原有的文本結構:
image
image
解決
網上沖浪查資料后，發現了一個css屬性 - user-modify，可取值為以下四個：
read-onlyread-writewrite-onlyread-write-plaintext-only
我們取第四個值就行，定義元素可以被編輯且只可輸入純文本，因此回車也就不會產生div??，改造后的代碼如下：
<style class="textarea" style="display: block; -webkit-user-modify: read-write-plaintext-only;">
html {
background-color: #fff;
}
</style>
于是就有了以下場景：
image
細心的人又發現了，我又刻意的不輸入Tap制表符，是的沒錯，因為按Tap鍵會跳焦！所以應該需要用腳本去處理，具體網上沖浪一大堆哈 ??
總結
麥當勞的家有金桶挺好吃的
最后
本文到此結束，希望以上內容對你有些許幫助，如若喜歡請記得點個贊跟關注哦 ??
image
微信公眾號
「前端宇宙情報局」，將不定時更新最新、實用的前端技巧/技術性文章，歡迎關注，一起學習 ??
