数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何在文本选择时显示自定义菜单？
在一些文本编辑器中，当您选择文本时，它会显示编辑文本的菜单，并提供诸如文本对齐、调整文本大小、更改颜色等功能。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 {
// get coOrdinates of the content div
let coOrdinates = document.querySelector(".content").getBoundingClientRect();
// set the display style of the hoverMenu to block
hoverMenu.style.display = "flex";
// set the position of the 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>
用户学习了如何在文本选择时显示一些自定义文本菜单。在这里，我们在自定义文本菜单中只添加了文本，但是用户也可以根据需要添加功能。例如，当我们点击复制文本时，它应该将其复制到剪贴板。
要显示文本选择上的自定义菜单，请获取所选文本的坐标，并相应地设置菜单的位置。
694 次查看
