Textarea o Caja de texto y códigos. Tipos

LuJo



El tag <textarea> puede resultar de utilidad para:

- Publicar un código en una entrada de forma que evita que los navegadores lo manipulen y modifiquen.
- Colocar un texto largo en un recuadro de forma que controlas el espacio que ocupa dentro de una entrada o post.


A. Textarea simple:

1. Colocando un código o texto que desees mostrar entre <textarea> y </textarea> :


<textarea>
Texto o código
</textarea>






2. Si se añade a la orden <textarea>, las propiedades "rows" (alto) y "cols" (ancho) controlarán las dimensiones de la misma. Sólo habría que variar las cifras de ambos parámetros o tags.


Ejemplo:

<textarea rows="5" cols="18">
AQUI VA EL CODIGO O TEXTO
QUE DESEAS MOSTRAR
DENTRO DE TU CAJA DE TEXTO
O TEXTAREA.
</textarea>






B. Textarea, o Caja de texto, con selección automática del contenido.

Podemos realizar una textarea donde añadir un código o texto con una peculiaridad:
Al colocar el cursor encima, o hacer clik sobre ella, se seleccionará todo su contenido. Es una fórmula que ahorra al usuario arrastrar el cursor por toda la zona para copiar el contenido.

<textarea rows="2" cols="5" onMouseOver="this.focus()" onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()"></textarea>

Ejemplo:


** Importante: el texto o código a introducir se coloca antes de </textarea>

** Recordar: con las propiedades "rows" (alto) y "cols" (ancho) se pueden controlar las dimensiones de la misma. Sólo habría que variar las cifras.



C. Caja de texto, (Textarea), con botón de selección automática del contenido.

A través de un botón puedes seleccionar todo el contenido que esté situado dentro de la textarea.

<center><form name="select_all">

<textarea rows="10" cols="30" name="text_area">

AQUI VA EL TEXTO O CODIGO A MOSTRAR

</textarea>

<input value="Seleccionar texto" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button"/></form></center>

Sustituye AQUI VA EL TEXTO O CODIGO A MOSTRAR por el texto o código que vayas a colocar en la cajita:





D. Textarea transparente, sin bordes, para incrustar en el post o entrada.

En esta tipología podemos introducir todo un párrafo, código, imagen, post, o lo que se nos antoje. No es de mis preferidas al parecerme incómoda.

(Paso a anotarla siguiendo las instrucciones de Jaime y su Balcón para que quede a modo de apunte personal.)

■ Código que puedes colocar en una entrada:

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 410px; height: 160px;"><div align="left"><span >

AQUI EL TEXTO O POST

</span></div></pre></div>

- También se pueden colocar imágenes y texto, de forma que todo quede dentro de la textarea. El código resultante sería:

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 410px; height: 160px;"><div align="left"><span >
<img src="URL DE LA IMAGEN"/>AQUI EL TEXTO O POST
</span></div></pre></div>

- Ejemplo con texto:


Puedes colocar en este espacio de la textarea todo lo que necesites. No importa su extensión. Recomiendo colocar un aviso por si hubiera algún despistado.


- Ejemplo con imagen y texto:



Puedes colocar en este espacio de la textarea todo lo que necesites. No importa su extensión. Recomiendo colocar un aviso por si hubiera algún despistado.



*Para modificar algunos detalles:

- Situar la caja o textarea en center significa centrado. Para colocarla a la izquierda, escribe left y a la derecha, escribe right.

- width: 410px; Es el ancho de la caja que puede personalizarse variando el número para modificar el tamaño de textarea.

- height: 160px; Es el alto de la caja que puede personalizarse variando el número para modificar el tamaño de textarea.

Un apunte más


26 comentarios:

Abi E.

Hola Lujo, ¿que pasa que publicas varias entradas seguidas para que elijamos la que mas nos guste? jajajajajaja.

Vaya susto que me he dado cuando he entrado y visto tanto junto, he pensado que me habia despistado demasiado.

Esta forma que muestras del Textareo, no resulta un poco incómoda a la hora de leer, lo digo por que si tienes que mover la barrita esa para que te salga el texto que se queda oculto. No se, se me escapa.

Un besazo

fabian

Muy completo todo, ademas de eso tambien se le pueden dar estilos con css :)

LadyMarian

Qué bueno! Muy completo! Además das varias opciones para elegir la que más guste. Muy buena entrada!
Besos

Lujo

Hola Holaaaa y Requete holaaaaa

Abi
Las tenía preparadas y pensé las saqué. Por favor, no hagas caso de mis "locuras" cuando posteo. Te eximo de cualquier responsabilidad u obligación (#^_^#) ...Sólo las hice por ordenar ideas (-^o^-)

En realidad es una fórmula para mostrar códigos o textos que quieras que otros copien sin problemas. Hay otrso métodos.
Pensé que una recopilación sería de utilidad.
Abrazotes gigantes!!


Fabian
Eres un crack!!! Cierto. Creo que veía tantas variantes que se le fue esa idea de la cabeza.
Mil gracias por apuntarlo!!
Abrazotes gigantes!!


LadyMarian
Confieso que es una forma de no perderme con estas cosas.(#^_^#)
Llegaba un punto que me mareaban las variantes. ;P
Abrazotes hipervitaminados!!!


Mil perdones por la tardanza en responder.

cafeina

hola, buenas, unas letritas para darte las gracias por lo bien que has explicado los textareas, estaba loquita buscando como hacerlo y tú has conseguido que parezca hasta sencillo!! graciaaaaaasssss!!

Lujo

Hola Cafeina
Mil gracias a ti por tus palabras. Una nunca sabe si se explica bien o mal.
Me alegro que esta entrada haya resultado de utilidad.
Un abrazo.

Anónimo

Una dudilla.
Al Crear un textArea en su esquina inferior derecha te sale para que pinches con el ratón y la puedas arrastrar y agrandar y empequeñecer a tu parecer.
¿No se puede bloquear esta opción? Es decir, que no se pueda modificar el tamaño del textarea.

¿Se puede cambiar el tipo de letra que aparece al escribir dentro?

Lujo

Anónimo, Hola...
Veamos....
1. A la textarea se la dota de un ancho y largo con rows= y cols= al que se les otorga un valor determinado como se ve en los ejemplos para que tengan el tamaño deseado.

2. Sí, se puede cambiar el tipo de letra que usas para escribir dentro de una textarea.
Lo más sencillo es usar el mismo editor de redactar y allí hacer los cambios que deseas.

Un Saludo.

Anónimo

Felicidades, es información sencilla, pero extremadamente util.

Anónimo

Muy bueno, quisiera que me dijeras si se
puede hacer un boton que copie todo el contenido al portapapeles?

Lujo

Siento contestar tarde por problemas de buena conexión (ToT)





Hola Anónimo
En este momento no tengo constancia de ello.
Saludos!

Ivan

me encanto quiero un codi go de sonido para la entrada de mi blog

Lujo

@Ivan

(ô_Ó) ????????????

miqueas

Anónimo dijo...
Una dudilla.
Al Crear un textArea en su esquina inferior derecha te sale para que pinches con el ratón y la puedas arrastrar y agrandar y empequeñecer a tu parecer.
¿No se puede bloquear esta opción? Es decir, que no se pueda modificar el tamaño del textarea.

¿Se puede cambiar el tipo de letra que aparece al escribir dentro?


Lo que dijo este anomimo es cierto, si te fijas por mas que esten las caracteristicas row= y cols=, en la esquina inferior derecha sigue apareciendo el area para clickear y modificar el tamaño del textarea.
En Google Chrome por ej se ve siempre.

Lujo

@miqueas
¿¿Se ve igual en todos los navegadores??

Pinka-waiiGirl

Hola!
Mil gracias por tu post! Me sirvió muchisisisisisimooo! mil gracias! ^^
cuídate
bye*

Lujo

@Pinka-waiiGirl
Gracias a ti!! De nada
Saludotes!!

Anónimo

Para los que andaban buscando la forma de bloquear la posibilidad de redimensionar el textarea basta con escribir en tu hoja de estilos el siguiente código:


Código CSS

textarea {
resize: none;
}


Saludos!

Lujo

@Anónimo
(ô_Ó)

hikarykei

wow!!! muy buen aporte..!! ya sigoo el blog!!! =) gracias eñ tema de chin chan jejeje muy nice

Lujo

@hikarykeiHola!
Me alegro que te sirva.
Muchas gracias!!!
Abrazotes!

Anónimo

estan muy buenos los post Excelentes!! soy javier soto y me agradaron en verdad te felicito

Marat

Hola, te felicito por el blog, ofreces información muy buena y muy útil. Yo estoy intentando utilizar la caja de texto que incluye el botón "Seleccionar texto" pero debo estar haciendo algo mal o me falta algún trozo de código para que funcione. El texto que quiero que se vea es un código HTML que la gente ha de copiar y pegar en su página, es un código de un pequeño logo y el enlace hacia mi web, pero en lugar de aparecer dicho código como texto me sale siempre la imagen. ¿Cómo tengo que hacerlo para que salga el código como texto dentro de la caja y no la imagen? Muchas gracias y un saludo.

Jaz

¡Hola! Estoy teniendo problemas, la caja de html me sale vacía en el blog. La he puesto en una de las barras laterales debajo de un banner y no hay caso, pruebo todas las opciones y me sigue pasando lo mismo. ¿Qué podrá ser? A lo mejor estoy cometiendo algún error muy simple, jeje.
Gracias por el aporte, saludos.

Lujo

@Marat
¿Y si usas un conversor de códigos HTML?
Desconozco lo que quieres hacer...pero con eso creo que baste...

Lujo

@Jaz
Desconozco el código que has puesto y lo que quieres hacer con ella...

Publicar un comentario en la entrada

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP