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ú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Ú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.