Ver Mensaje Individual
  #12 (permalink)  
Antiguo 22/01/2009, 09:06
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Negrita en un TEXTAREA

Actualicé el ejemplo que puse arriba. Lo pongo en un mensaje nuevo porque no puedo actualizar las observaciones de programeitor en una edición.

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>DESTACA EN TEXTAREA. </title>
<script type="text/javascript">
var eco = false;
var txtAt , txtAd;

function rell(){
txtAt = document.getElementById("atras");
txtAd = document.getElementById("adelante");

txtAt.value = txtAd.value;
txtAt.scrollTop = txtAd.scrollTop;
}

function busq(){
var reemplaza = "";
var texto = txtAt.value;
var acierto = document.getElementById("aBuscar").value;

for (r=0; r<acierto.length; r++){
reemplaza += "_"; 	/*"\u2588" highlight; "—" tachado; "¯" sobrerrayado*/
}
resultado = texto.replace(acierto, reemplaza);
if(acierto == "" || resultado == ""){
alert("Complete todos los campos.");
eco = false }
else{
txtAt.value = resultado;
delta = texto.indexOf(acierto);
if(eco && delta != -1) busq();
else eco = false;
}
mueve();
}

function mueve(){
txtAt.scrollTop = txtAd.scrollTop;
txtAt.scrollLeft = txtAd.scrollLeft;
setTimeout("txtAt.scrollTop = txtAd.scrollTop; txtAt.scrollLeft = txtAd.scrollLeft", 300);
}

onload = rell;
</script>
<style type="text/css">
body {
	font-size: 100%;
}
#contenedor {
	position: relative; height: 200px;
}
#atras, #adelante {
	color: #000; font-size: 12px; background-color: transparent; font-family: "courier new", monospace; position: absolute; height: 150px; resize:none;
}
#atras {
	color: #f00; 
}
</style>

</head>
<body>
<h2>Permite subrayar b&uacute;squedas en un <tt>textarea</tt>. (IE7.0, FF3.0, Op9.6, Ch0.2)</h2>

<form>buscar <br>
<input value="ORO" id="aBuscar"><br><br>
en 
<div id=contenedor><textarea id="atras"></textarea> 
<textarea id="adelante" onpaste="rell()" onselect="rell()" onkeyup="rell()" onscroll="mueve()" onmousemove="mueve()" onmousewheel="mueve()">FOROSDELWEB...

FOROS DEL WEB

FOROS DEL WEB

FOROS DEL WEB QWERTYUIOP_QWERTYUIOP

FOROS DEL WEB

QWERTYUIOP
forosdelweb
</textarea> 
</div><br><br>

<button onclick="busq(); return false">BUSCAR SIGUIENTE</button>
<button onclick="eco=true; rell(); busq(); return false">BUSCAR TODOS</button> 
<button onclick="rell(); return false">LIMPIA B&Uacute;SQUEDA</button> 
</form></body></html> 
Ahora funciona.
Lo de la fuente no tiene arreglo; si no contiene el caracter 2588 (de bloque entero), lo toma de alguna otra fuente que no va a tener el mismo ancho, y aparece esa sombra o todo el texto desfasado.

Firefox sigue sin reconocer los name de formulario. Los cambié por identificadores.
Lo del desplazamiento con la barra se "arregló"; el escript puede leer la posición de la capa de adelante y pasarla a la de atrás. La ruedita del ratón es un tema aparte. Mozilla aún no interpreta el evento con onmousewheel (y probablemente no lo hará), pero si detecta el movimiento con onscroll. Como la dirección en este caso se puede leer con JS, casi tenemos resuelto el problema.

Opera sí lo acepta, aunque la velocidad de lectura de la posición de escroll deja bastante que desear. Hay un pequeño 'truco' con setTimeout para asegurarnos de que ambas capas siempre se vean a la misma altura (con una pequeña demora). Aunque no funciona con los botones de desplazamiento de la barra.

Chrome trae un nodo para redimensionar por default, se lo quité con CSS porque no hay evento para eso y no me deja igualar las capas.

Seguramente con HTMLArea o un div editable nos ahorramos todos los problemas, pero esto era como un desafío, y había quedado inconcluso.

Está de más decir que el 'buscador' es una excusa para mostrar el efecto funcionando, hay mejores en este foro, y en el ejemplo hay algún bug.