Question

我有一个contenteditable 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 。你可以像这样动态地做到这一点。

＆＃13;

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';
});

＆＃13;

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

＆＃13;

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

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

如何在一个可信的div中编辑确切的元素？

1 个答案: