0%

JS 的 contenteditable 属性

问题

看到一个 P 标签,包含了 contenteditable 属性,可以对该标签进行编辑感觉很有意思

然后有个大佬说:

我一般要改网页上的东西都会直接在控制台输入 document.body.contentEditable = true

这儿做一下笔记

解决

创建一个可编辑的 span 标签,并且观察其变化执行某函数

1
<span class="observable" contenteditable="true">12345</span>
1
2
3
4
5
6
7
8
9
10
var observables = document.querySelector('.observable');

var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
console.log(mutation);
});
});

var config = { characterData: true, subtree: true };
observer.observe(observables, config);