TEXTAREA.
Vamos a conocer como armar su estructura del textarea y las partes que la conforman.
Para comenzar con un textarea basico, vamos a comenzar con un textarea de texto.
Código: <textarea>Texto</textarea>
Este seria el código basico de un textarea.
Ahora pasamos a las opciones avanzadas.
dentro del cierre del textarea le podemos agregar estos valores.
• TEXTAREA WIDTH
Agregandole width le podemos dar un ancho al campo.
Cita: <textarea style="width:50%">Texto de ejemplo</textarea>
• TEXTAREA HEIGHT
Agregandole height le podemos dar un alto al campo.
Cita: <textarea style="height:100px">Texto de ejemplo</textarea>
• TEXTAREA COLS
Con este metodo de cols tambien se puede ajustar al ancho, pero es un uso parecido al width ya que es uso de columnas.
Cita: <textarea cols="20">Texto de ejemplo</textarea>
• TEXTAREA ROWS
Con este metodo de rows tambien se puede similar el alto, pero es uso distinto porque viene siendo las filas.
Cita: <textarea rows="5">Texto de ejemplo</textarea>
• TEXTAREA NAME
Este valor name no cambiaria mucho el aspecto, ya que le da un nombre al valor si queremos enviar un valor.
Cita: <textarea name="text">Texto de ejemplo</textarea>
• TEXTAREA READONLY
Este valor readonly es muy util al momento de generar un texto para que no se pueda cambiar, lo que hace este valor es conservar el texto que esta dentro, sin que nadie lo pueda editar, ya sea usted el visitante de esta página.
Cita: <textarea readonly>Texto de ejemplo</textarea>
• TEXTAREA DISABLED
El valor disable, permitira que no se pueda hacer clic, tampoco no se va a poder copiar el texto.
Cita: <textarea disabled>Texto de ejemplo</textarea>
• TEXTAREA RESIZE
Este es un valor para usarlo con css, este valor va a permitir que el visitante no pueda agrandar/disminuir el campo, lo que hace este valor es mantener estatico el campo.
Código: <style>textarea{resize:none}</style>
• TEXTAREA ONCLICK SELECT
Comenzamos agregar javascript en el textarea. Este script va a permitir cuando demos clic al campo, se selecione todo el texto que hay dentro.
Cita: <textarea onClick="javascript:select();">Texto de ejemplo</textarea>
• TEXTAREA ONCLICK SELECT BOTON
Usamos el mismo valor anterior de selecionar con un clic, pero este metodo va a ser mediante un boton.
Código: <form>
<textarea name="selboton">Texto de ejemplo</textarea>
<br />
<input value="Seleccionar Todo" onclick="javascript:this.form.selboton.focus();this.form.selboton.select();" type="button" />
</form>
- TEXTAREA CON JAVASCRIPT
• TEXTAREA ONMOUSE SELECT
Vamos a usar otro script pero este metodo va ser mediante el mouse, lo que hará es al pasar el mouse por el campo, se selecionará todo el texto que hay dentro.
Cita: <textarea onMouseOver="this.focus()" onFocus="this.select()">Texto de ejemplo</textarea>
• TEXTAREA LIMITE DE TEXTO.
Vamos agregarle un valor maximo del texto que se puede agregar en el campo del textarea para los visitantes. El valor 100 son las 100 caracteres que van a poder agregarse.
Cita: <textarea maxlength="100">Texto de ejemplo</textarea>
• TEXTAREA TEXTO PREVIO.
Podemos agregarle un texto previo antes de comenzar a escribir en el campo, por ejemplo, escribe aqui..
Cita: <textarea placeholder="Escribe aqui..."></textarea>
- Esto ha sido todo el uso que le podemos dar al textarea usando html y javascript. Si quieres ver como quedan cada uno de los resultados, lo pueden mirar por => Resultados Textarea
- Algunos códigos no fueron agregados porque ya no funciónan en los navegadores mas actualizados, si hay algunos códigos en javascript / html / html5, que no estan, hasnos saber dejandolo en tu comentario.
Los css, jquery etc.. vendran mas tardes.
Saludos. ______________  |
Soporte PWG: 