如何在文本选择时显示一些自定义菜单？
在某些文本编辑器中，当您选择文本时，它会显示编辑文本的菜单，并提供对齐文本、对齐文本、增加文本大小、更改颜色等功能。Microsoft Word 就是最好的例子。在 Microsoft Word 中，当您选择任何文本时，它会显示自定义水平菜单以对文本执行某些操作。
本教程将使用 JavaScript 在文本选择上创建自定义菜单。
语法
用户可以按照以下语法在文本选择上显示一些自定义菜单。
let coOrdinates = document.querySelector(".content").getBoundingClientRect();
let posX = clientX - Math.round(coOrdinates.left) + "px";
let posY = clientY - Math.round(coOrdinates.top) - 25 + "px";
在上述语法中，我们获取内容 div 的坐标。之后，我们找到自定义文本菜单的 x 和 y 位置。接下来，我们可以使用 JavaScript 更改自定义文本菜单的位置。
步骤
步骤 1 − 在 HTML 中，创建一个 div 并添加文本。另外，创建一个自定义菜单并使用 CSS 设置其样式。
步骤 2 - 在 JavaScript 中，使用 addEventListner() 方法，当发生"mousedown"事件时，获取单击位置的坐标并将其存储在"clientX"和"clientY"变量中。
步骤 3 - 当文档上触发"mouseup"事件时，使用 getSelection() 方法获取选定的 HTML。
步骤 4 - 使用 toString() 方法将 HTML 转换为文本。
步骤 5 - 检查文本。如果文本为空，则隐藏自定义菜单。
步骤 6 - 如果用户选择了一些文本，则获取所选文本的坐标。
步骤 7 - 定义"posX"变量并存储自定义菜单的水平位置。此外，定义"posY"变量以存储自定义菜单的垂直位置。
步骤 8 - 使用"posX"和"posY"变量的值设置自定义菜单的左侧和顶部位置。
示例
在下面的示例中，我们创建了 div 元素并添加了一些文本内容。此外，我们还创建了自定义菜单并使用 CSS 设置了其样式。在自定义菜单中，我们添加了复制和剪切文本。
在 JavaScript 中，我们实现了上述步骤，如果用户选择某些文本，则显示自定义菜单。在输出中，用户可以尝试选择文本，他们将在文本顶部看到自定义菜单。
<html>
<head>
<style>
.hoverMenu { display: none; position: absolute; background: #a4a4a4; border-radius: 6px; height: 30px; }
.hoverMenu span{ color: #000; cursor: pointer; margin: 8px;}
</style>
</head>
<body>
<div class = "content">
<h2>Showing custom menu on text selection</h2>
<p>Select some text to see custom menu</p>
<p>TutorialsPoint is an online platform that provides free tutorials and resources on various programming languages, software tools, and technologies. </p>
<div class = "hoverMenu"> <span> Copy </span> <span> Cut </span> </div>
</div>
<script>
var clientX, clientY;
document.addEventListener("mousedown", function (event) { clientX = event.pageX; clientY = event.pageY;});
document.addEventListener("mouseup", () => {
let selectionFromDocument = document.getSelection();
let textValue = selectionFromDocument.toString();
var hoverMenu = document.querySelector(".hoverMenu");
if (textValue == "") { hoverMenu.style.display = "none";
} else {
// 获取内容 div 的坐标
let coOrdinates = document.querySelector(".content").getBoundingClientRect();
// 设置 hoverMenu 的显示样式为 block
hoverMenu.style.display = "flex";
// 设置 hoverMenu 的位置
let posX = clientX - Math.round(coOrdinates.left) + "px";
hoverMenu.style.left = posX;
posY = clientY - Math.round(coOrdinates.top) - 25 + "px";
hoverMenu.style.top = posY;
}
});
</script>
</body>
</html>
用户学会了在文本选择上显示一些自定义文本菜单。在这里，我们在自定义文本菜单中只添加了文本，但用户也可以根据需求添加功能。例如，当我们点击复制文本时，它应该将其复制到剪贴板。
要在文本选择上显示自定义菜单，请获取所选文本的坐标，并相应地设置菜单的位置。
