如何在 contenteditable div 中获得编辑的确切元素？

Question

我有一个 contenteditable div，它附有一个 keyup 事件。随着用户的输入，div 中创建了许多 p 标签。

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

那是 keyup 事件。

我如何计算出用户在 contenteditable div 中具有哪个元素 edited/created？

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

$(".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>

请注意，当创建新的 p 元素时，您可能需要再次运行将 contenteditable 属性设置为 div 的子元素的代码段在 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>

如何在 contenteditable div 中获得编辑的确切元素？

How to get the exact element edited within a contenteditable div?

javascript

jquery

keypress

contenteditable

keyup