javascript - 如何更新 popper.js 元素的 x/y 位置？

Question

如何移动 popper.js 元素以遵循特定的坐标？

我能够获得(我认为)文本区域中的插入符号位置，但现在我需要让 Popper.js 跟随它。

我在根目录和修改器中尝试了 update 和 onUpdate。我完全不理解文档。

我创建了一个 codepen 来展示到目前为止我能够实现的目标:

https://codepen.io/anon/pen/gzGvvG

const refEl = document.getElementById('ref');
const popEl = document.getElementById('pop');

new Popper(refEl, popEl, {
  placement: 'auto',

            modifiers: {
                offset: {
                    enabled: true,
                    offset: '0,10'
                },
                flip: {
                    behavior: ['left', 'bottom', 'top']
                },
                preventOverflow: {
                    enabled: true,
                    padding: 10,
                    escapeWithReference: false,
                }
            },
});

document.getElementById("ref").onkeyup = function() {
  var xy = getCursorXY(refEl, refEl.selectionEnd)

  document.getElementById("log").innerText = `X: ${xy.x}, Y: ${xy.y}`;
}

我从 Medium 获得的 getcursorXY 函数:https://medium.com/@jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a

Answer 1

这不是您问题的完整答案...因为它需要一些调整才能让它像我认为您正在努力让它工作的那样工作。但是，这是我从您的 CodePen 修改的 javascript，我相信这是朝着您希望实现的目标的正确方向迈出的一步。

    const refEl = document.getElementById('ref');
    const popEl = document.getElementById('pop');

    function update_popper(x, y) {
        new Popper(refEl, popEl, {
            placement: 'auto',

            modifiers: {
                offset: {
                    enabled: true,
                    offset: (x - 150) + ',' + (-1 * (y - 140))
                },
                flip: {
                    behavior: ['left', 'bottom', 'top']
                },
                preventOverflow: {
                    enabled: true,
                    padding: 10,
                    escapeWithReference: false,
                }
            },
        });
    }

    document.getElementById("ref").onkeyup = function () {
        var xy = getCursorXY(refEl, refEl.selectionEnd)

        document.getElementById("log").innerText = `X: ${xy.x}, Y: ${xy.y}`;
        update_popper(xy.x, xy.y);
    }

    const getCursorXY = (input, selectionPoint) => {
        const {
            offsetLeft: inputX,
            offsetTop: inputY,
        } = input
        // create a dummy element that will be a clone of our input
        const div = document.createElement('div')
        // get the computed style of the input and clone it onto the dummy element
        const copyStyle = getComputedStyle(input)
        for (const prop of copyStyle) {
            div.style[prop] = copyStyle[prop]
        }
        // we need a character that will replace whitespace when filling our dummy element if it's a single line <input/>
        const swap = '.'
        const inputValue = input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value
        // set the div content to that of the textarea up until selection
        const textContent = inputValue.substr(0, selectionPoint)
        // set the text content of the dummy element div
        div.textContent = textContent
        if (input.tagName === 'TEXTAREA') div.style.height = 'auto'
        // if a single line input then the div needs to be single line and not break out like a text area
        if (input.tagName === 'INPUT') div.style.width = 'auto'
        // create a marker element to obtain caret position
        const span = document.createElement('span')
        // give the span the textContent of remaining content so that the recreated dummy element is as close as possible
        span.textContent = inputValue.substr(selectionPoint) || '.'
        // append the span marker to the div
        div.appendChild(span)
        // append the dummy element to the body
        document.body.appendChild(div)
        // get the marker position, this is the caret position top and left relative to the input
        const { offsetLeft: spanX, offsetTop: spanY } = span
        // lastly, remove that dummy element
        // NOTE:: can comment this out for debugging purposes if you want to see where that span is rendered
        document.body.removeChild(div)
        // return an object with the x and y of the caret. account for input positioning so that you don't need to wrap the input
        return {
            x: inputX + spanX,
            y: inputY + spanY,
        }
    }        

我在这里所做的是将您的 Popper() 移动到一个名为 update popper 的函数中，该函数每次都会使用新的 x,y 偏移重建新的 popper。您不必担心一遍又一遍地创建新的 Popper()，因为它主要只是数学运算，权重很小。

无论如何，我认为这应该可以帮助您更接近您的目标..祝您好运!