Resaltar palabra/texto seleccionado

Eux · #1 (**permalink**) 12/10/2011, 12:02

Hola a tod@s,

Me gustaría poder simular la opción de resaltar del word para poder aplicarlo a unos textos que vera el usuario al que se le pedirá que resalte lo más importante y guardarlo para su posterior analisis.

Esto debe ser con un DIV (o no) y a diferencia que un textarea no puedo saber la posición exacta del click de ratón, lo único que he encontrado es que puedas saber cual es la palabra seleccionada (getselected()) y luego hacer un replace de esa palabra colocandole <span>, pero esta solución no me funciona bien ya que siempre hace el replace a la 1º ocurrencia que se encuentra en el texto que no siempre coincide con la seleccionada.

¿Alguna idea?

Gracias.

dleal100 · #2 (**permalink**) 12/10/2011, 13:35

Código:

document.body.contentEditable ='true';
document.designMode ='on'; void 0

con esto puedes editar los divs, y despues ya despues puedes saver la posision del raton XD asi ya no usaras los textarea

Eux · #3 (**permalink**) 12/10/2011, 14:07

Hola dleal100, gracias por responder.

Mi nivel en javascript es muy básico, este es el código que encontré e intentaba usar:

Código Javascript:

Ver original<html>
<body>
 
<form>
    <div onclick="s(this)" id="myDiv">This is some text</div>
    <input type="text" onclick="s(this)" value="This is some text">
</form>
 
<script type="text/javascript">
 
 
function s(el){
    var sel, rng, r2, i=-1;
 
    //firefox
    if(typeof el.selectionStart=="number"){
        i=el.selectionStart;
    }
    //ie
    else if(document.selection && el.createTextRange){
        sel=document.selection;
        if(sel){
            r2=sel.createRange();
            rng=el.createTextRange();
            rng.setEndPoint("EndToStart", r2);
            i=rng.text.length;
        }
         }
         else{
        el.onkeyup=null;
        el.onclick=null;
    }
    alert(i)
}
</script>
 
</body>
</html>

como puedes ver en el input funciona pero en el DIV no, se ve por lo que vi por los foros por culpa de selectionStart, y esto DIV no lo reconoce.

No sabía cómo usar tu solución en este caso, como el código no es mucho pensé que podrías echarle un vistazo como encajarlo, mil gracias.

dleal100 · #4 (**permalink**) 12/10/2011, 14:47

en le div tampoco ami me funciono ._.
pense que convirtiendo el div en editable se podia cojer los balores pero no :S

pero si lo que quieres es saver la posision del raton en un textarea y un input

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=iso-8859-1" />

<title>ejemplo</title>

<script>

function devPos(input){
if(typeof document.selection != 'undefined' && document.selection && typeof input.selectionStart == 'undefined' || input.selectionStart=='vacio'){
var str =document.selection.createRange();
var stored_range = str.duplicate();
stored_range.moveToElementText(input);
stored_range.setEndPoint( 'EndToEnd', str );
input.selectionStart = stored_range.text.length - str.text.length;
input.selectionEnd = input.selectionStart + str.text.length;
alert(input.selectionStart);
input.selectionStart='vacio';
}else if(typeof input.selectionStart != 'undefined'){
alert(input.selectionStart);
}
}

function devPos2(input){
if(typeof document.selection != 'undefined' && document.selection && typeof input.selectionStart == 'undefined'){
var range = document.selection.createRange();
var bookmark = range.getBookmark();
var caret_pos = bookmark.charCodeAt(2) - 2;
alert(caret_pos)
}else if(typeof input.selectionStart != 'undefined'){
alert(input.selectionStart);
}

}



</script>

</head>



<body>

(click sobre los campos para obtener la posición del cursor)

<form id="form1" name="form1" method="post" action="">

  <textarea name="area" rows="5" cols="" id="area" onclick="devPos(this)">esta es una prueba
  assmkasmsa
  as
  as
  </textarea>

    <br />
  <input name="campo" type="text" id="campo" value="ver qu&eacute; pasa en textfield" size="60" onclick="devPos2(this)" />
</form>

</body>
</html>

Eux · #5 (**permalink**) 12/10/2011, 15:33

Gracias dleal100, pero como dije al principio debe ser en un DIV, ya que quiero meterle al texto seleccionado un <span> delante y el textarea es para textos planos y no lo va a interpretar.

Saludos

dleal100 · #6 (**permalink**) 12/10/2011, 15:49

Cita:

Iniciado por Eux

Gracias dleal100, pero como dije al principio debe ser en un DIV, ya que quiero meterle al texto seleccionado un <span> delante y el textarea es para textos planos y no lo va a interpretar.

Saludos

diablos, lo siento no pude aserlo xD
te digo que intente aserlo con un DIV pero no pude ._.
aver si alguien mas encientra la solucion a atu problema @_@
es mucho para mi serebro XDD