使 DIV 風格化為 textarea 並包含可編輯的格式化文本

Question

我有這個 div：

<div class="textarea"></div>

我用這個 css 將其風格化為 textarea：

.textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 100%;
}

現在，如果我在這個 div 中添加一些 html 代碼，甚至光標也不顯示在那里。 我可以使這個 div 可編輯嗎？

Answer 1

只需將contentEditable屬性更改為 true，即可排序

 .textarea { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 100%; }

 <div class="textarea" contentEditable="true"></div>