Selección de texto en div

chabibi10 · #1 (**permalink**) 18/03/2011, 04:30

Hola

Bueno explico el problema que tengo estoy haciendo una aplicación web, que tiene un opcion que es marca el texto que hay dentro de un div, el usuario con el ratón ira seleccionado el texto que le interesa dentro del div y que daria marcado cambiando el color del fondo del texto que ha seleccionado. he buscado no he encontrado nada que me sirva para hacer lo que yo necesito, no pido que me den el codigo javascript sino ideas o q atributos o clase utilizar para poner hacer lo que necesito

Adios

Saludos.

Panino5001 · #2 (**permalink**) 18/03/2011, 08:27

Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<script type="text/javascript">
function colorear(){
    if(typeof document.selection != 'undefined' && document.selection) {
        var str = document.selection.createRange().text;
        var sel = document.selection.createRange();
        sel.text = '<span style="background:yellow">' + str + '</span>';
        this.innerHTML=this.innerText;
        document.selection.empty() ;
        return;

    }else if(window.getSelection){
        var sel=window.getSelection();
        var span=document.createElement('span');
        span.style.background='yellow';
        span.innerHTML=sel;
        var range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(span);
    }
}
</script>

</head>

<body>


<div id="pp" onmouseup="colorear.call(this)">Seleccione total o parcialmente este texto</div>
</body>
</html>

O así, para que funcione exactamente igual en cualquier navegador:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function colorear(){
	if(typeof document.selection != 'undefined' && document.selection) {
		var str = document.selection.createRange().text;
		var sel = document.selection.createRange();
		sel.text = '{{' + str + '}}';
		this.innerHTML=this.innerHTML.replace(/\{\{[^\}\}]*\}\}/g, function(key){return '<span style="background:yellow">'+key.slice(2,-2)+'</span>'});
		document.selection.empty() ;
		return;
	}else if(window.getSelection){
		var sel=window.getSelection();
		var span=document.createElement('span');
		span.style.background='yellow';
		span.innerHTML=sel;
		var range = sel.getRangeAt(0);
		range.deleteContents();
		range.insertNode(span);
	}
}
</script>

</head>

<body>


<div id="pp" onmouseup="colorear.call(this)">Seleccione total o parcialmente este texto</div>
</body>
</html>

También te recomiendo echar un vistazo a esto: http://www.disegnocentell.com.ar/notas2.php?id=206

Panino5001 · #3 (**permalink**) 18/03/2011, 08:36

Otro enlace que quizá te interese:
http://css-tricks.com/overriding-the...olor-with-css/