如何将popper.js元素移动到特定的coords?
我能够得到(我认为)textarea中的插入位置,但现在我需要让Popper.js遵循它。
我在root用户和修饰符中尝试,更新和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
答案 0 :(得分: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(),因为它几乎全都是数学,而且权重很小。
无论如何,我认为这应该可以帮助您更加接近目标。祝您好运!