获取 contenteditable 中发生按键按下的元素

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>

Answer 3

您可以查看当前文本选择的

anchorNode

来获取发生keydown事件的DOM节点：

const div = document.getElementById('editable-div');
div.addEventListener('keydown', event => {
    console.log(window.getSelection()?.anchorNode);
}, false);

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection