Negrita en un TEXTAREA

j@n · #1 (**permalink**) 16/06/2005, 09:55

Hola,
¿puedo dar formato 'negrita' a parte del texto que muestro en un TEXTAREA?
¿como?

Si añado la etiqueta <b>...</b>
se ve dentro del textarea: <b>texto</b>

Gracias
espero su ayuda.

j@n

jam1138 · #2 (**permalink**) 17/06/2005, 04:44

... supongo es para ponerlo en un textarea tuyo... para una página tuya.. pués no podrás poner etiquetas HTML y que te respondan así como así... solo que "el dueño" de dicho textarea lo establesca así... pero hasta ahora núnca he visto eso...

Pero bueno, si es para tí... supongo lo que buscas es un editor... buscalo así en el foro de JavaScript y encontrarás información y enlaces hacia editores prefabricados... específicamente hay un post que tiene un link hacia un blog donde enlistan gran cantidad de editores. Dentro de los más famosos (

mejor dicho, de los que conosco

) están el HTMLArea y el FKCEditor... buscalos así en google...ç

Si quieres hacer tu editor... te ayudarán en el foro de JS (en tu busqueda igual hayarás referencias de esto...)

Suerte!

j@n · #3 (**permalink**) 17/06/2005, 07:25

no quería complicarlo tanto.... sólo quiero 'pintar' en el textarea el texto que el usuario ha introducido en la página anterior.... con algunas modificaciones : por eso necesitaba la negrita !

¿se puede añadir un ENTER en un textarea?

Espero su ayuda.
Gracias
j@n

caricatos · #4 (**permalink**) 17/06/2005, 07:29

Hola:

para poner un retorno de carro, prueba poniendo \n

Saludos

Umberto · #5 (**permalink**) 17/06/2005, 17:28

hola, para hacer lo que deseas hacer sería por CSS muy simple:

.formulario{
font-weight: bold;
}

<textarea class="formulario"></textarea>

Saludos!
PD

Para que sea en todos los textarea sería:

textarea{
font-weight: bold;
}

j@n · #6 (**permalink**) 20/06/2005, 08:56

Hola, gracias por vuestras respuestas... pero no consigo hacer lo que necesito.

1) ENTER: Si añado \n al texto: VEO "texto\n" dentro del textarea

2) NEGRITA: Necesito que parte del texto esté en negrita, y el resto no. No TODO el texto.

¿Alguna pista?
Thanks

j@n

jam1138 · #7 (**permalink**) 20/06/2005, 22:48

¿qué hay con la "pista" que te dejé... es lo que buscas...

Cita:

Iniciado por jam1138

(...) lo que buscas es un editor... buscalo así en el foro de JavaScript y encontrarás información y enlaces hacia editores prefabricados... (...)

Si no sabes de JavaScript lo más sencillo es que implementaras uno ya hecho (de verdad hay unos muuuy simples)... pero si quieres hacer el tuyo... insisto, información encontrarás allá, deberás estudiarlo... seguro hay algo en las FAQ que te servirá...

furoya · #8 (**permalink**) 25/06/2005, 19:42

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&uacutesquedas 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&Uacute;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

furoya · #9 (**permalink**) 05/10/2005, 13:18

Hola de nuevo :

vuelvo por una duda sobre el código que puse arriba.

Lo probé en Firefox y no anda. Lo más extraño es que al hacer un click me avisa que va a mandar información (¿A quiéeeen?

), luego me bloquea el documento y en la barra de dirección aparecen variables que no deberían estar allí (¿o sí?).

Aunque no entiendo que pasa, lo arreglé con un return false en los botones.

Pero lo que no pude hacer es leer el desplazamiento del textarea.

¿Hay alguna forma de conseguir el valor en pixeles en Mozilla?

Gracias

furoya

programeitor · #10 (**permalink**) 05/10/2005, 15:18

Para pintar en negrita en un texarea vas a tener que recurrir a un script.

Para el retorno de carro, prueba con esto:

<textarea style="white-space:pre;">

te respetara los espacios en blanco y los retornos de carro.

furoya., el programa funciona en IE y en Firefox he visto que se muestra el subrayado un instante ,y en la consola javascript te recomienda usar "document.getElementById". ,Nescape no traga, pero Nescape tiene su continuacion con Firefox sino me equivoco. Yo, personalmente ,estoy dejando de probar en Nestcape, me parece inutil probar en un explorador anticuado. Espero me corrijan.

programeitor · #11 (**permalink**) 05/10/2005, 15:39

Furoya, he estado probando la aplicacion del fondo a partes del textarea con el codigo hexadecimal que pusiste "u2588"., en IE se muestra el fondo rojo de la palabras a buscar, pero las demas palabras tienen una sombra roja. Sin embargo netscape muestra solo lo esperado, pero desaparece tan pronto como aparece., para compatibilizar la manipulacion de objetos con Firefox se hace nesesario recurrir a document.getElementById.

furoya · #12 (**permalink**) 22/01/2009, 09:06

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.

programeitor · #13 (**permalink**) 28/01/2009, 21:46

Valla furoya, recuerdo el tema, pero no los detalles...

Lo he probando en IE y subraya las coincidencias, pero sigo resistiendome a las dobles capas.

IE admite bastante html en un texarea si se le añade mediante appendChild:

Código PHP:

  <html><head><style>
#area b{color:red;font-size:120%;}
</style><script>
function fun()
{
var area=document.getElementById("area"),
texto=area.value,
cadena=document.getElementById("cadena").value
if(cadena.length==0){alert("no hay nada que resaltar");return}
if(texto.length==0){alert("no hay texto para resaltar");return}
var div=document.createElement("div"),
n=0,
ntexto=""
while(true)
{
n=texto.indexOf(cadena)
if(n==-1){ntexto+=texto.substring(0);break}
ntexto+=texto.substring(0,n)+"<b>"+cadena+"</b>"
texto=texto.substring(n+cadena.length)
}
div.innerHTML=ntexto
area.value=""
area.appendChild(div)
delete div
}
</script></head><body>
<input id="cadena" type="text" value="sanroque">
<input type="button" value="resaltar" onclick="fun()"><br>
<textarea id="area" rows="30" cols="80">
El perro de sanroque no tiene rabo
 por que los sanroqueños se lo han cortado
</textarea>
</body></html>

Aun no lo he probado en otros navegadores, ahora no tengo ninguno ,salvo el IE claro.

Saludos.

miguel4ngel · #14 (**permalink**) 05/02/2009, 04:13

Cita:

Iniciado por Umberto

hola, para hacer lo que deseas hacer sería por CSS muy simple:

.formulario{
font-weight: bold;
}

<textarea class="formulario"></textarea>

Saludos!
PD

Para que sea en todos los textarea sería:

textarea{
font-weight: bold;
}

eso mismo hago yo.. defino las que quiero segun se muestre..! los select les hago su propio estilo.. bien bueno..!

furoya · #15 (**permalink**) 31/03/2009, 08:49

Cita:

Iniciado por programeitor

...recuerdo el tema, pero no los detalles...

¡Pero ni hacía falta! Yo soy el pesado que sigo dándole vueltas al asunto, pero no voy a pretender que la gente normal se acuerde.

Ese ejemplo que pusiste está excelente. Y ni te molestes en probarlo en otros navegadores ... aprovecha un bug de IExplorer. "Eso" no debería pasar.

Cita:

Iniciado por miguel4ngel

...eso mismo hago yo...

El problema es que Umberto se equivocó.
j@n dijo claramente que lo quería para una "parte del texto"; y ese código es para "todo".

Pero lo más grave es que vengas 3 años después a felicitarlo por ese error y contarnos que haces lo mismo, que por otro lado no es ningún código original, es simple y puro CSS que está en todos los tutoriales.

A estas alturas ya no puede haber confusiones. La discusión entre programeitor y yo fue demasiado clara.

Uno de los dramas de 'terminar' un tema con un mensaje desubicado es que mucha gente tiene la mala costumbre de leerlo primero, y suponer de qué trata el resto del tema. Al ver como aprueban un código archiconocido, pueden pensar que esa era la respuesta final, y se pierden así otros ejemplos que pueden servirles para desarmar y estudiar.
O mejor aún, para seguir respondiendo correctamente algo que valga la pena leer.