插入符号进入时jQuery焦点内容可编辑

Question

   我有一个可内容编辑的 div，按下按钮后，新的 contenteditable 跨度元素会放在该 div 的末尾。

   因此，当用户点击这些新跨度之一时，它会获得焦点。但是当使用箭头键导航 div 时，如果用户将插入符号移动到其中一个动态范围内，它不会获得焦点。

   我尝试了很多谷歌搜索，但找不到任何相关内容。

例如：

<div contenteditable=true>
    aa
    <span contenteditable=true style="border: solid thin #000">bb</span>
    aa
</div>
<script type="text/javascript">
    document.getElementsByTagName('span')[0].onfocus = function(){alert('focused');};
</script>

   当用户在输入 div 以在跨度内导航时使用箭头键时，我试图触发警报。但是onfocus 似乎没有被触发。

Answer 1

希望对你有帮助

document.querySelector('div').onkeyup = function (e) {
        let selection = document.getSelection().getRangeAt(0);
        let spans = document.querySelectorAll('span');

        spans.forEach(function (span) {
            if( span.contains(selection.startContainer) ){
                alert('focused');
            }
        });
    }

<div contenteditable=true>
    aa
    <span contenteditable="true" style="border: solid thin #000">bb</span>
    aa
</div>