Hola todos :
seguramente estoy llegando tarde. Lo que ocurre es que hallé un viejo disco traspapelado ( ¿'trasdisquetado'? ) donde alguna vez trabajé con códigos que tenía completamente olvidados. Y uno era sobre destacar o resaltar texto dentro de un
textarea.
En el original, lo que buscaba era simular un
highlight o
background-color amarillo tras algunas palabras, pero al probarlo hoy descubro ( o redescubro ) que solamente funciona con fuente
Courier New, y en algunas configuraciones, ni así.
Terminé cambiando el resaltado por un subrayado en rojo. Esto parece andar bien. Al menos en
Internet Explorer, donde lo probé.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<title>DESTACA EN TEXTAREA. </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
var eco=false;
function rell(){
frm.atras.value = frm.adelante.value;
frm.atras.scrollTop = frm.adelante.scrollTop;
}
function busq(){
var reemplaza = "";
var texto = frm.atras.value;
var acierto = frm.aBuscar.value;
for (r=0; r<acierto.length; r++){
reemplaza += "_"; /*"\u2588"*/
}
resultado = texto.replace(acierto, reemplaza);
if(acierto=="" || resultado==""){
alert("Complete todos los campos.");
eco=false }
else{
frm.atras.value=resultado;
delta=texto.indexOf(acierto);
if(eco && delta!=-1){
busq();}
else eco=false;
}
}
function mueve(T){
var despl = T.scrollTop;
frm.atras.scrollTop = despl;
}
</SCRIPT>
<STYLE>
#contenedor {
POSITION: relative; HEIGHT: 100px
}
#atras {
COLOR: #f00; FONT-SIZE: 16px; BACKGROUND: none transparent scroll repeat 0% 0%; FONT-FAMILY: "courier new"; POSITION: absolute; HEIGHT: 100px
}
#adelante {
FONT-SIZE: 16px; BACKGROUND: none transparent scroll repeat 0% 0%; FONT-FAMILY: "courier new"; POSITION: absolute; HEIGHT: 100px
}
</STYLE>
</HEAD>
<BODY onload="rell()">
<h2>Permite subrayar búsquedas en un <tt>tesxtarea</tt>.</h2>
<FORM name=frm>buscar <BR>
<INPUT value="UIO" name="aBuscar"><BR><BR>
en
<DIV id=contenedor><TEXTAREA id="atras" name="atras"></TEXTAREA>
<TEXTAREA onpaste="rell()" id="adelante" onkeyup="rell()" onscroll="mueve(this)" name="adelante" onselect="rell()">QWERTYUIOP...
QWERTYUIOP
QWERTYUIOP
QWERTYUIOP ASDFGH ZXCVBNM
QWERTYUIOP
ASDFGHJK
qwertyuiop
</TEXTAREA>
</DIV><BR><BR>
<BUTTON onclick="busq()">BUSCAR SIGUIENTE</BUTTON>
<BUTTON onclick="eco=true; rell(); busq()">BUSCAR TODOS</BUTTON>
<BUTTON onclick="rell()">LIMPIA BÚSQUEDA</BUTTON>
</FORM></BODY></HTML>
Cabe aclarar que esta es una pregunta sempiterna en el foro; a pesar de que por definición se entiende que el
textarea fue hecho para permitirnos escribir texto plano, sin formato; y si le cambiamos esa característica dejaría de ser un
textarea para ser -p.e.- un
htmlarea.
Usé el buscador para elegir uno de los tantos temas donde responder y me quedé con éste, porque me parece que el código se acerca a tu pregunta,
j@n, aunque no sea negrita.
Una última aclaración : el comentario que está junto a la variable '
reemplaza +=' es el caracter para la simulación de
bgColor. Si a alguien se le ocurre cómo hacer para que funcione bien, le agradezco que lo postée aquí. y si alguien ya lo resolvió en otro tema, también le agradezco que ponga un enlace.
Y hablando de enlace, dejo éste por si te sirve de algo
Select + TextArea
saludos
furoya