如何在内容可编辑的 div 中编辑确切的元素?

Question

我有一个内容可编辑的div，上面附加了一个keyup事件。当用户键入时，在该div 中创建了许多p标签。

$(".pad").keyup(function(e) {
doSomething();
});

这是keyup事件。

如何确定用户在内容可编辑的div 中编辑/创建了哪个元素？

我已经尝试了以下方法，但似乎不起作用：

$(".pad p").keyup(function(e) {
doSomething();
});

目标是拥有这样的东西：

$(".pad").keyup(function(e) {
theEditedElement = ...;
$(theEditedElement).css("color","red");
$(theEditedElement).(...);
});

我们从以下方面开始：

<div class="pad" contenteditable="true">
<p>Some text</p>
</div>

然后，用户将其编辑为：

<div class="pad" contenteditable="true">
<p>Some text</p>
<p>Some more text</p>
<p>Even <b>more</b> text</p>
</div>

如果用户决定编辑<p>Some more text</p>，则应检索该特定<p>元素。

Answer 1

如果您希望事件目标是内容可编辑的div的子节点，而不是div本身，则需要将这些子节点设置为contenteditable。您可以像这样动态地执行此操作。

const contentEl = document.querySelector('.pad');
const paras = contentEl.childNodes;
// here, set contenteditable attribute for all paragraphs inside of that div
for (let i = 0; i < paras.length; i++) {
if (paras[i].nodeType === document.ELEMENT_NODE) {
paras[i].setAttribute('contenteditable', true);
}
}
contentEl.addEventListener('keyup', event => {
// event.target will be the element that you are asking for 
const theEditedElement = event.target;
console.log(theEditedElement);
theEditedElement.style.color = 'red';
});

<div class="pad">
<p>Some text</p>
<p>Some more text</p>
<p>Even <b>more</b> text</p>
</div>

请注意，当在该div内创建新的p元素时，您可能需要再次运行将contenteditable属性设置为div的子级的代码段。

另一种选择是创建突变观察者，并让它处理对封闭div的更改，以防添加任何新段落(让它设置新添加段落contenteditable属性)。

const contentEl = document.querySelector('.pad');
const paras = contentEl.childNodes;
for (let i = 0; i < paras.length; i++) {
if (paras[i].nodeType === document.ELEMENT_NODE) {
paras[i].setAttribute('contenteditable', true);
}
}
contentEl.addEventListener('keyup', event => {
// event.target will be the element that you are asking for 
const theEditedElement = event.target;
console.log(theEditedElement);
theEditedElement.style.color = 'red';
});
// this code here is just to demonstrate the change to the enclosing div
const addNewParagraph = () => {
const p = document.createElement('p');
contentEl.appendChild(p);
p.textContent = 'new paragraph';
};
const btn = document.querySelector('button');
btn.addEventListener('click', addNewParagraph);
// create mutation observer
const config = { childList: true };
const callback = function(mutationList) {
for (const mutation of mutationList) {
if (mutation.type === 'childList') {
console.log('new paragraph has been added');
// get the added node and set its contenteditable attribute
mutation.addedNodes[0].setAttribute('contenteditable', true);
}
}
}
const observer = new MutationObserver(callback);
observer.observe(contentEl, config);

<button>add new paragraph</button>
<div class="pad">
<p>Some text</p>
<p>Some more text</p>
<p>Even <b>more</b> text</p>
</div>