Question

我有一个令人满意的div，按下按钮后，新的 contenteditable span元素放在这个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>

当插入符号

1 个答案: