Question

我的div是contenteditable，而div有一些内容：

<div contenteditable="true" id="editable-div">
  <p id="paragraph">
    Lorem <em>ipsum</em> dolor sit <strong id="stong-el">amet</strong>
  <p>
</div>

我想拦截keydown个事件并找到用户尝试编写的元素。

在收听内容可编辑div时，我已经找不到具体元素了：

const div = document.getElementById('editable-div');
div.addEventListener('keydown', event => { /* ??? */ }, false);

问题：回调中的事件并没有告诉我哪个元素已被写入，它只告诉我已写入#editable-div

我的另一个尝试是监听嵌套事件，如下所示：

// either
const el = document.getElementById('paragraph');

// or
const el = document.getElementById('stong-el');

el.addEventListener('keydown', event => { /* ??? */ }, false);

问题在于事件永远不会发生。显然，事件只会触发具有contenteditable属性的元素，这种情况很糟糕。

我拥有的最后一种方法是听#editable-div并检查哪个元素有文本选择，但是如果有其他方法我不想。

更新

我找到的另一种方法是在可编辑元素上使用MutationObserver，如下所示：

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

const config = { characterData: true, subtree: true };
const div = document.getElementById('editable-div');

observer.observe(div, config);

这会记录我编辑过的文本元素。

我不确定我的问题是否得到了回答，因为最后我想做两件事：

捕获并阻止事件更新内部数据结构
从数据结构中渲染React组件

这似乎不是一个合适的解决方案。

Answer 1

您可以将keydown事件附加到文档正文中。然后在keydown事件中，使用document.activeElement返回当前具有焦点的元素，并将接收键盘输入。

这是一个解释document.activeElement（https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement）

的链接

Answer 2

您可以将侦听器置于contenteditable元素上，然后通过将新文本与旧文本进行比较来检查哪个元素已更新。根据您的不同，您可以在各自的分支机构中执行您的操作。

检查此代码块 -

<div id="ce" contenteditable="true">
    <strong id="s">Abc</strong><br/>
    <i id="i">Hello</i>
</div>

<script>

    oldstext = document.getElementById('s').textContent;
    olditext = document.getElementById('i').textContent;

    document.getElementById('ce').addEventListener('keydown', event => { 
        //alert("ce Edited");
        if(oldstext != document.getElementById('s').textContent){
            console.log(oldstext + "   v/s  " + document.getElementById('s').textContent);
            oldstext = document.getElementById('s').textContent;
        }
        else if (olditext != document.getElementById('i').textContent){
            console.log(olditext + "   v/s  " + document.getElementById('i').textContent);
            olditext = document.getElementById('i').textContent;
        }


    }, false);
</script>

获取在可信的

2 个答案: