contenteditable

contenteditable

contenteditable是一个全局属性，表示元素能否被编辑，如果是，浏览器会修改其部件以允许编辑。

属性值

1. true或空字符串''，表示该元素可被编辑。
2. false表示元素不能别编辑。
3. plaintext-only表示元素的原始文本是可编辑的，但禁用了富文本格式。
4. 如果元素有该属性，但没有明确任何值，则将其作为空字符串''对待。
5. 如果元素没有提供该属性或者属性值是无效的，则其属性值继承父元素，因此如果其父元素是可编辑的那么此元素也是可编辑的。

使用技巧

1. 可使用CSS属性caret-color设置输入时插入光标的颜色。
2. 可通过监听元素的input事件，监听元素内容的修改。

案例

HTML

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

CSS

#div {
    caret-color: red;
}

JavaScript

const oDiv = document.querySelector('#div')

oDiv.addEventListener('input', (e) => {
    console.log(e.target.innerText);
}, false)