[SOLUCIONADO] Seleccionar texto en un div y subrayar

kiraesley · #1 (**permalink**) 23/03/2015, 06:40

Hola amigos investigando por internet llevo más de dos día y la verdad no se si mi problema no se puede solucionar o es que algo estoy haciendo mal.

Mi objetivo es tengo un div y me gustaría recuperar el texto que selecciono con el ratón y no se si esta función no existe, pero no encontré nada de nada. El objetivo final es seleccionar este texto y al presionar un botón cambiarle el color de fondo. Un saludo y gracias por todo

__SDP__ · #2 (**permalink**) 23/03/2015, 18:23

aqui hay algo que encontre que te puede iluminar.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>ejemplo</title> 
<script> function sel(inicio,fin){ input=document.getElementById('area'); if(typeof document.selection != 'undefined' && document.selection){ tex=input.value; input.value=''; input.focus(); var str = document.selection.createRange(); input.value=tex; str.move('character', inicio); str.moveEnd("character", fin-inicio); str.select(); } else if(typeof input.selectionStart != 'undefined'){ input.setSelectionRange(inicio,fin); input.focus(); } } 
</script> 
</head> 
<body> 
<form id="form1" name="form1" method="post" action=""> 
<textarea name="area" cols="60" rows="10" id="area">esta es una prueba</textarea> <input type="button" name="Submit" value="seleccionar" onclick="sel(8,11)" /> 
</form> 
</body> 
</html>

kiraesley · #3 (**permalink**) 24/03/2015, 03:47

Por hay van los tiros, pero hay alguna manera de que te reconozca lo seleccionado automáticamente?

kiraesley · #4 (**permalink**) 25/03/2015, 04:56

Por hay van los tiros, pero hay alguna manera de que te reconozca lo seleccionado automáticamente? Quiero decir sería seleccionar con el raton una palabra o una frase y al presionar un botón que le cambia el color de fondo a esa selección

NueveReinas · #5 (**permalink**) 25/03/2015, 05:38

Cita:

Iniciado por kiraesley

Por hay van los tiros, pero hay alguna manera de que te reconozca lo seleccionado automáticamente? Quiero decir sería seleccionar con el raton una palabra o una frase y al presionar un botón que le cambia el color de fondo a esa selección

No entiendo la finalidad de seleccionar el texto y que después cambie de fondo la sección tras hacer click en un botón.

¿No sería más fácil simplemente hacer click en el botón asignado a la sección y que cambie el color del fondo?

kiraesley · #6 (**permalink**) 25/03/2015, 05:56

Cita:

Iniciado por NueveReinas

No entiendo la finalidad de seleccionar el texto y que después cambie de fondo la sección tras hacer click en un botón.

¿No sería más fácil simplemente hacer click en el botón asignado a la sección y que cambie el color del fondo?

Sería a modo subrayado de un texto pero como un subrayador amarillo de los gordos y al cambiar el fondo de color amarillo solo el texto seleccionado hace ese efecto.
Y la verdad que me estoy volviendo loco y no se como hacerlo :S

NueveReinas · #7 (**permalink**) 25/03/2015, 06:20

Cita:

Iniciado por kiraesley

Sería a modo subrayado de un texto pero como un subrayador amarillo de los gordos y al cambiar el fondo de color amarillo solo el texto seleccionado hace ese efecto.
Y la verdad que me estoy volviendo loco y no se como hacerlo :S

Estoy probando un código. Cuando tenga resultados los posteo.

NueveReinas · #8 (**permalink**) 25/03/2015, 06:40

Después de un buen rato de investigación...

http://jsfiddle.net/vfuamLzh/

Código HTML:

Ver original<p>Esto texto no se marcará.</p>
<div class="miTexto">Si seleccionas este texto, se marcará.</div>
<span>BLA BLA BLA, aquí no hay marca si lo seleccionas.</span>
<div class="miTexto"><p>Selecciona esto :)</p></div>

Código CSS:

Ver original/* Esto te marca la selección actual */
*::selection {
    color:black;
    background:red;
}
 
/* Este es el estilo que se le va a agregar al texto seleccionado */
.marca {
    color:black;
    background:yellow;
}

Código Javascript:

Ver original$(".miTexto").on("mouseup", function (e) { //Importante trabajar con clases y NO con IDs
    var selected = getSelection();
    var range = selected.getRangeAt(0);
    console.log(range);
    if(selected.toString().length >= 1){ //Si se seleccionan uno o más caracteres...
        var newNode = document.createElement("span"); //Crea un span
        newNode.setAttribute("class", "marca"); //Le añade la clase
        range.surroundContents(newNode);       
    }
    selected.removeAllRanges();
 });
 
function getSelection() {
    var seltxt = '';
     if (window.getSelection) { 
         seltxt = window.getSelection(); 
     } else if (document.getSelection) { 
         seltxt = document.getSelection(); 
     } else if (document.selection) { 
         seltxt = document.selection.createRange().text; 
     }
    else return;
    return seltxt;
}

Espero que sea lo que buscas

kiraesley · #9 (**permalink**) 31/03/2015, 02:24

Perdona tío por motivos familiares no pude entrar
eres un genio de verdad enormee