Sería genial si seleccionar texto en una página web mostrara algunas opciones como copiar, pegar o compartir. Un menú de selección logra esto. Básicamente, es una GUI que se muestra en respuesta a la actividad del usuario, como la selección de texto. Un menú de selección proporciona una gama diferente de opciones a las que puede acceder simplemente haciendo clic en ellas. Normalmente, las opciones accesibles son acciones asociadas con el objeto seleccionado. Es posible que esté familiarizado con los diferentes tipos de menús de selección que aparecerán cuando seleccione algún texto en cualquier sitio web. En este artículo, crearemos un menú personalizado/de selección que flota justo encima del texto seleccionado.
Sintaxis:
<div class="menu">
<i class="fa fa-copy fa-2x"></i>
<i class="fa fa-highlighter fa-2x"></i>
</div>
Enfoque: hemos creado una estructura muy simple que consta de 2 div, el primero tiene un texto ficticio para seleccionar, y dentro del primer div está presente el segundo div. El segundo div es nuestro menú personalizado/de selección que aparecerá en la selección de texto. Para crear diferentes opciones para el menú, hemos utilizado íconos de fuente impresionante que también le darán a nuestro menú un placer visual. Puedes añadir tantas opciones como quieras a tu menú de selección. Pero aquí hemos añadido solo dos opciones, la primera es copiar y la segunda es resaltar .
Ahora, comprendamos la parte de JavaScript. Primero, obtenemos la string seleccionada con la ayuda de document.getSelection() . Si la string seleccionada no está vacía, obtenemos la posición del primer div a través de getBoundingClientRect() y lo colocamos en la variable rect . Usando rect , calculamos y asignamos las posiciones superior e izquierda del menú de selección (segundo div). De esta forma, el menú de selección se coloca un poco por encima del área seleccionada y centrado horizontalmente. El control del menú de selección se mostrará en la pantalla si elegimos algunos de los textos de ejemplo en la página en este momento.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom menu on text selection</title>
<link
rel="stylesheet"
href=
"https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity=
"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"/>
<style>
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #cccccc;
}
.text {
width: 400px;
min-height: 200px;
background: #fff;
padding: 20px 50px 50px 50px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.8;
word-spacing: 8px;
}
p {
margin: 0;
}
h1 {
user-select: none;
color: green;
}
.menu {
display: none;
position: absolute;
background: #a4a4a4;
border-radius: 6px;
}
.menu i {
color: #000;
cursor: pointer;
margin: 8px;
}
#output {
position: absolute;
opacity: 0.01;
height: 0;
overflow: hidden;
}
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.popup-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
display: flex;
align-items: center;
}
.close-btn {
color: #aaa;
font-size: 28px;
font-weight: bold;
margin-left: auto;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.popup-content p {
font-size: 28px;
font-weight: bold;
}
</style>
<script>
var pageX, pageY;
document.addEventListener("mouseup", () => {
function copyfieldvalue() {
var field = document.getElementById("output");
field.focus();
field.setSelectionRange(0, field.value.length);
document.execCommand("copy");
}
let selection = document.getSelection();
let selectedText = selection.toString();
var menu = document.querySelector(".menu");
if (selectedText !== "") {
let rect = document.querySelector(".text").getBoundingClientRect();
menu.style.display = "block";
menu.style.left = pageX - Math.round(rect.left) + "px";
menu.style.top = pageY - Math.round(rect.top) - 58 + "px";
document.getElementById("output").innerHTML = selectedText;
var popup = document.getElementById("mypopup");
var copybtn = document.getElementById("copy-btn");
copybtn.addEventListener("click", () => {
copyfieldvalue();
popup.style.display = "block";
});
var span = document.getElementsByClassName("close-btn")[0];
span.addEventListener("click", () => {
popup.style.display = "none";
});
window.addEventListener("click", (event) => {
if (event.target == popup) {
popup.style.display = "none";
}
});
} else {
menu.style.display = "none";
}
});
document.addEventListener("mousedown", (e) => {
pageX = e.pageX;
pageY = e.pageY;
});
</script>
</head>
<body>
<div class="text">
<h1>GeeksforGeeks</h1>
<p>
In today’s digital world, when there are thousands of online platforms
(maybe more than that!) available over the web, it becomes quite
difficult for students to opt for a quality, relevant and reliable
platform for themselves. Meanwhile, as Computer Science is a very vast
field hence students are required to find an appropriate platform that
can fulfill all their needs such as – Tutorials & Courses, Placement
Preparation, Interview Experiences, and various others. And with the
same concern, GeeksforGeeks comes in the picture – a one-stop
destination for all Computer Science students!!
</p>
<div class="menu">
<i class="fa fa-copy fa-2x" id="copy-btn"></i>
<i class="fa fa-highlighter fa-2x" id="highlight-btn"></i>
</div>
<textarea id="output"></textarea>
<div id="mypopup" class="popup">
<div class="popup-content">
<p>Copied!!</p>
<span class="close-btn">×</span>
</div>
</div>
</div>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA