监听移动浏览器上的光标变化

Question

当您有可编辑的内容并选择文本的某些部分或仅更改光标位置时，是否可以观察光标位置？

当内容可编辑光标发生变化时，我需要这个来移动虚拟光标。

是使用setInterval并查询位置的唯一方法。这是一种丑陋的黑客行为。

我正在使用 Android 和 Google Chrome/Brave 以及快捷键盘。不过如果有跨浏览器的解决方案就好了。

Answer 1

您可以使用输入和选择更改事件。

const editedDiv = document.getElementById('editableDiv');
const virtualCursor = document.getElementById('cursor');

editedDiv.addEventListener('input', updatePostionCursor);
editedDiv.addEventListener('select', updatePositionCursor);

function updatePositionCursor()
{
    const selectPosition = window.getSelection();

    if(selectPosition.rangeCount > 0)
    {
        const rangeCheck = selection.getRange(0);
        const relativePosition = rangeCheck.getBoundingClientRect();


        //Here we can update the position of an virtual cursor
        virtualCursor.style.left = `${rect.left}px`;
        virtualCursor,style.top = `${rect.top}px`;

    }
}