要在文本框中获取插入符号的(x,y)像素坐标,可以使用JavaScript的getBoundingClientRect()
方法和window.getSelection()
方法。以下是一个简单的示例代码:
function getCursorPosition(inputElement) {
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
const x = rect.left;
const y = rect.top;
return { x, y };
}
const inputElement = document.getElementById('input-element');
inputElement.addEventListener('click', () => {
const cursorPosition = getCursorPosition(inputElement);
console.log(`x: ${cursorPosition.x}, y: ${cursorPosition.y}`);
});
这段代码首先定义了一个getCursorPosition
函数,该函数接受一个inputElement
参数,该参数是要获取插入符号位置的文本框元素。函数内部,我们首先获取当前选择范围,然后获取选择范围的边界矩形,最后从边界矩形中获取x和y坐标。
接下来,我们为文本框添加了一个click
事件监听器,当用户点击文本框时,我们调用getCursorPosition
函数获取插入符号的坐标,并将其打印到控制台中。
需要注意的是,这个方法只适用于可编辑的文本框,不适用于不可编辑的文本框或其他类型的输入框。
领取专属 10元无门槛券
手把手带您无忧上云