Oh, <textarea>‘s. Cuántas peculiaridades posees. Aquí hay una colección de nueve cosas que podría querer hacer relacionadas con las áreas de texto. Disfrutar.
1. La imagen como fondo de área de texto desaparece cuando se ingresa texto.
Puede agregar una imagen de fondo a un área de texto como puede hacerlo con cualquier otro elemento. En este caso, la imagen es un recordatorio amistoso para ser amable =). Si agrega una imagen de fondo, por cualquier motivo, puede romper el estilo predeterminado del navegador del área de texto. La negrita sólida predeterminada de 1 px se reemplaza por un borde biselado más grueso. Para restaurar la configuración predeterminada del navegador, simplemente puede forzar el borde a la normalidad.
textarea {
background: url(images/benice.png) center center no-repeat; /* This ruins default border */
border: 1px solid #888;
}Esa imagen de fondo podría interferir con la legibilidad del texto una vez que el texto llega tan lejos. Aquí hay algo de jQuery que eliminará el fondo cuando el área de texto esté enfocado, y lo volverá a colocar si el área de texto se deja sin texto dentro.
$('textarea')
.focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });2. Texto de marcador de posición HTML5
Hay un nuevo atributo como parte de los formularios HTML5 llamado marcador de posición. Muestra texto gris difuminado en el área de texto (también funciona para entradas de estilo de texto) que desaparece cuando el área de texto está enfocado o tiene algún valor.
<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>El texto de marcador de posición HTML5 funciona en Safari 5, Mobile Safari, Chrome 6 y Firefox 4 alpha.
3. Texto de marcador de posición, HTML5 con respaldo de jQuery
Podemos probar fácilmente si un elemento en particular admite un atributo en particular probando con JavaScript:
function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
};Luego, podemos escribir código para que, si el navegador admite el atributo de marcador de posición, lo usaremos; de lo contrario, imitaremos el comportamiento con jQuery:
if (!elementSupportsAttribute('textarea', 'placeholder')) {
// Fallback for browsers that don't support HTML5 placeholder attribute
$("#example-three")
.data("originalText", $("#example-three").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
// Browser does support HTML5 placeholder attribute, so use it.
$("#example-three")
.attr("placeholder", $("#example-three").text())
.text("");
}4. Quita el resplandor azul
Todos los navegadores WebKit, Firefox 3.6 y Opera 10 colocan un borde azul brillante alrededor de las áreas de texto cuando están enfocadas. Puede eliminarlo de los navegadores WebKit de esta manera:
textarea {
outline: none;
}También puede aplicarlo al estilo: focus, pero funciona de cualquier manera. Todavía no he encontrado una manera de eliminarlo de Firefox u Opera, pero -moz-outline-style fue todo lo que probé.
RECORDATORIO: El resplandor azul se está convirtiendo en un estándar fuerte y romper ese estándar suele ser algo malo para sus usuarios. Si lo hace, debe tener una razón muy convincente para hacerlo, así como un estilo de enfoque igualmente fuerte.
5. Quitar el controlador de cambio de tamaño
Los navegadores WebKit adjuntaron un pequeño elemento de interfaz de usuario en la parte inferior derecha de las áreas de texto que los usuarios pueden usar para hacer clic y arrastrar para cambiar el tamaño de un área de texto. Si por alguna razón desea eliminar eso, CSS es todo lo que necesita:
textarea {
resize: none;
}6. Agregar controlador de cambio de tamaño
jQuery UI tiene una interacción redimensionable que se puede usar en áreas de texto. Funciona en todos los navegadores y anula la versión nativa de WebKit, porque esta versión tiene todo tipo de cosas sofisticadas (como devoluciones de llamada y animación).
Para usarlo, cargue jQuery y jQuery UI en su página y, en su nivel más básico, lo llama así:
$("textarea").resizable();7. Cambiar el tamaño automáticamente para que se ajuste al contenido
James Padolsey tiene un script jQuery súper agradable para cambiar automáticamente el tamaño de las áreas de texto (que se apagó y está en Internet, así que aquí hay una copia de seguridad).
Aquí hay otro de Louis Lazeris, que también incluye enlaces a otras opciones. Funciona exactamente como probablemente espera que lo haga. El área de texto comienza con un tamaño normal razonable. A medida que escribe más y más contenido, el área de texto se expande para incluir todo ese texto, en lugar de activar una barra de desplazamiento como es la predeterminada.
El complemento tiene una variedad de opciones, pero en su forma más simple, simplemente carga jQuery, el archivo del complemento, y lo llama así:
$('textarea').autoResize();Otro truco aquí es no usar un <textarea> en absoluto, pero <div contenteditable>. Eso crecerá automáticamente sin ninguna ayuda de JavaScript sofisticada, excepto que ya no es un elemento de formulario real, por lo que necesitará JavaScript para extraer / enviar el valor.
8. Nowrap
Para evitar que el texto se ajuste normalmente en CSS, use #whatever {espacio en blanco: nowrap; }. Pero por alguna razón, eso no funciona con áreas de texto. Si desea poder escribir en áreas de texto y prefiere que las líneas no se rompan hasta que presione retorno / ingresar (en su lugar, se activa una barra de desplazamiento horizontal), tendrá que usar el atributo wrap = “off”.
<textarea wrap="off" cols="30" rows="5"></textarea>9. Quite las barras de desplazamiento predeterminadas en Internet Explorer
IE coloca una barra de desplazamiento vertical por defecto en todas las áreas de texto. Puede ocultarlo con overflow: hidden, pero luego no obtiene ninguna barra de desplazamiento cuando se expande. Afortunadamente, el desbordamiento automático funciona para eliminar la barra de desplazamiento, pero aún así volver a colocarla cuando sea necesario.
textarea {
overflow: auto;
}Todos los ejemplos anteriores se pueden ver aquí.