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

Question

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

我能够得到（我认为）在textarea中的插入位置，但现在我需要让Popper.js遵循它。

我在根和修饰符上尝试，更新和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（），因为它几乎都是数学，而且重量很轻。

无论如何，我认为这应该有助于让你更接近你的目标..祝你好运！