Estoy haciendo una página web y quiero saber cómo puedo hacer para que cuando se termine de seleccionar texto:
- Opción 1: Automáticamente el texto sea copiado al portapapeles o
- Opción 2: Se muestre un tooltip text con la opción de Copiar
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadPuedes hacerlo asi:
// creamos un evento para saber cuando el usuario hace click
document.addEventListener("click",()=>{
// creamos un variable s con la selecion del usuario y lo pasamos a string
let s = window.getSelection().toString();
// si hay texto seleccionado lo copiamos al clipboard
if(s) document.execCommand('copy');
});
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
opcion 2 con confirmacion:
// creamos un evento para saber cuando el usuario hace click
document.addEventListener("click",()=>{
// creamos un variable s con la selecion del usuario y lo pasamos a string
let s = window.getSelection().toString();
// validamos que hay texto seleccionado
if(s){
//creamos un confirm para preguntar si desea copiarlo
let c= confirm("deseas copiar el texto?");
// si confirma que si copiamos el texto
if(c) document.execCommand('copy');
}
});
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
El código CSS es algo simple pero estoy seguro de que puedes mejorarlo.
Se puede hacer un div en el que este el texto a copiar y seguido hacer una función que copié el texto, pero al hacer clic en otro elemento tal como te lo muestro.
function copyToClipboard(elemento) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(elemento).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Copiado")
}
#p1 {
display: none;
}
.tooltip {
opacity: 0;
visibility: hidden;
background: #ef4c4c;
padding: 15px;
left: 5px;
color: #fff;
position: relative;
transition: 0.3s ease;
}
.tooltip:after {
content: '';
position: absolute;
float: left;
left: -10px;
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid blue;
}
.container i:hover ~ .tooltip {
opacity: 1;
visibility: visible;
left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<i onclick="copyToClipboard('#p1')">Hola mundo</i>
<span id="p1">texto a copiar</span>
<span class="tooltip">Copiar enlace</span>
</div>
Para hacer esto puedes escuchar al evento mouseup
con JavaScript y manipular el texto seleccionado para poder imprimirlo, luego ejecutar el gatillo copy
con el texto que tienes ahora seleccionado.
Cabe destacar que la primera opción realmente es poco practica y si no es bien ejecutada puede crear una mala experiencia de usuario, siempre puedes brindarle a tus usuarios la opción de manipular sus datos por su cuenta.
Mira los siguientes ejemplos:
Ejecutamos el comando copy
y este copiara cualquier texto seleccionado en el documento, luego utilizamos el texto del elemento para imprimir que ya se ha copiado el texto.
document.getElementById("select").addEventListener("mouseup", function(){
var text = window.getSelection().toString();
document.execCommand('copy');
console.log("Texto Copiado: "+ text)
});
<p id="select">Hola, seleccioname</p>
Agregamos un par de eventListener
a la clase select
para detectar cuando el mouse esta fuera o dentro para así mostrar un botón que se posiciona justo al lado del elemento que se quiere copiar, luego al hacer click este toma el texto del elemento y utilizando la Clipboard API copiamos al portapapeles el texto seleccionado, luego alertamos que fue copiado un texto.
Importante: Haz clic en el botón para copiar el texto...
var el = document.getElementsByClassName("select");
var span = document.querySelector("#copy");
var current;
for (var i=0; i < el.length; i++) {
el[i].addEventListener("mouseenter", function(){
var rect = this.getBoundingClientRect();
var top = rect.top;
var right = rect.right;
current = this.getAttribute("id");
span.style.top = top+"px";
span.style.left = right+"px";
span.innerHTML = "Copiar Texto"
span.style.visibility = "visible";
span.style.opacity = "1";
});
el[i].addEventListener("mouseleave", function(){
setTimeout(function(){
span.style.visibility = "hidden";
span.style.opacity = "0";
span.innerHTML = "Copiar Texto"
}, 2000);
});
}
span.addEventListener("click", function(){
var selected = document.getElementById(current).textContent;
navigator.clipboard.writeText(selected).then(function(){
span.innerHTML = "Texto Copiado"
});
});
#copy {
padding: 5px 10px;
background-color: black;
color: white;
font-weight: bold;
cursor: pointer;
position: absolute;
font-family: sans-serif;
font-size: 12px;
border-radius: 10px;
transition: .2s;
visibility: hidden;
opacity: 0;
}
.select {
max-width: 160px;
}
<p id="1" class="select">Hola, esto es un texto!</p>
<span id='copy'>Copiar Texto</span>
En la opción 1 también puedes utilizar la Clipboard API, pero te dejo las dos opciones para que observes de que manera lo puedes hacer.
Espero que te sea de ayuda, un saludo.