Propiedades útiles del área de texto. Texto sin saltos de línea en el área de texto. Cambiar el tamaño para adaptarlo al contenido
Breve reseña propiedades útiles de uno de los elementos del formulario: área de texto, que le permitirá resolver una serie de Posibles problemas al diseñar el sitio.
Campo área de texto es uno de los elementos del formulario destinados a ingresar datos de varias líneas. No veo ningún sentido en entrar en más detalles: lea la documentación, pero sería útil detenerse en algunas propiedades interesantes del área de texto.
Texto predeterminado para área de texto en HTML5
Una solución bastante común: en lugar de describir el propósito del elemento del formulario en una línea separada Se utiliza el llamado “texto predeterminado”. Esto generalmente se hace usando JavaScript simple para los eventos correspondientes.
Por supuesto, puedes pensar en más solución conveniente, pero creo que entiendes el punto. En HTML5, apareció un nuevo atributo de marcador de posición para la etiqueta de área de texto. agregar) te permite hacer lo mismo sin problemas con JavaScript.
Esta propiedad de área de texto se muestra en un campo. valor específico atributo como texto gris claro, que desaparece cuando te concentras en un elemento del formulario. Está claro que este nuevo producto sólo funciona en navegadores que soporten el estándar HTML5.
Luz de fondo azul para área de texto
Al centrarse en un elemento de formulario, la mayoría navegadores modernos, resalta sus bordes con un marco azul. A pesar de esta propiedad textarea sirve para mejorar la usabilidad del sitio, en algunos casos es inaceptable. Para eliminar el resaltado azul en un área de texto, puede utilizar la propiedad CSS de contorno.
Área de texto ( esquema: ninguno; -moz-apariencia: botón; /* para Firefox */ )
La propiedad de contorno especifica las opciones del borde exterior. Lamentablemente, esto no funciona para todos los navegadores. Para Firefox utilizo la propiedad -moz-appearance aunque está destinada a mostrar el elemento como estándar elementos personalizados basado en el tema del sistema operativo.
Deshabilitar los controladores de cambio de tamaño del área de texto
La mayoría de los navegadores modernos muestran el elemento de área de texto con un controlador de cambio de tamaño. campo de texto en su esquina inferior izquierda. Para deshabilitar esta propiedad de área de texto, puede usar la propiedad CSS de cambio de tamaño.
Área de texto (cambiar tamaño: ninguno;)
La propiedad CSS de cambio de tamaño puede tener otros valores: ambos (horizontal y verticalmente), horizontal (solo horizontalmente), vertical (solo verticalmente) y heredar (hereda el valor del padre).
Texto sin saltos de línea en el área de texto
Cuando el número de caracteres en un área de texto excede el ancho de su área, transferencia automática líneas. En teoría, para evitar esto, puedes especificar las siguientes propiedades CSS para el área de texto:
Área de texto (espacio en blanco: nowrap; desbordamiento: auto;)
Sin embargo, esta opción no funciona para todos los navegadores y, a menudo, no funciona según lo previsto. Normalmente se utiliza la propiedad wrap, que existe desde hace mucho tiempo, pero que sólo está documentada en HTML5.
La propiedad de ajuste puede tener otros valores: suave (las palabras se ajustan automáticamente) y duro (las palabras se ajustan mecánicamente).
Eliminar el área de texto de la barra de desplazamiento
en el navegador explorador de Internet desplazamiento vertical El área de texto está configurada de forma predeterminada. Para eliminarlo, puedes usar Propiedad de desbordamiento de CSS, configurándolo como oculto, pero recomiendo usar auto, lo que te permitirá dejar el desplazamiento si realmente lo necesitas.
Área de texto (desbordamiento: automático;)
20/06/16 2.4KElemento HTML de área de texto es un campo para ingresar texto que consta de varias líneas y editarlo. Se utiliza para ingresar y editar textos largos.
El contenido de este elemento representa su valor original. Aparece en el campo de texto después de cargar un documento o después de hacer clic en el botón Restablecer en un formulario.
Ejemplos
En el primer ejemplo, crearemos un formulario con un control de área de texto con todos los valores predeterminados. También estableceremos un atributo de marcador de posición con una pista sobre qué tipo de contenido se debe ingresar en el campo. Se mostrará cuando el área de texto esté vacía:
En el segundo ejemplo, estableceremos el valor inicial como el contenido del área de texto HTML. Se utilizará para completar el control inmediatamente después de cargar el documento y también después de restablecer el formulario.
A diferencia de un campo de entrada de texto de una sola línea, el elemento textarea utiliza el valor inicial como contenido ( en lugar del atributo de valor):
A continuación usamos atributos de columnas y filas para especificar el número de caracteres que se pueden mostrar en el control a la vez. Los navegadores calculan el ancho y el alto de un elemento multiplicando estos valores por el ancho y alto de los caracteres de la fuente utilizada.
Ancho entrada HTML El área de texto se calcula en relación con el ancho de caracteres de la fuente utilizada. Dado que los caracteres no siempre tienen el mismo ancho, los navegadores pueden usar varios métodos para redondear este valor:
En el siguiente ejemplo utilizamos dos atributos. Establecen límites en la longitud del texto que se puede ingresar en un área de texto. Estos son minlength y maxlength, sus nombres hablan por sí solos.
La longitud mínima solo se verifica cuando se envían datos del formulario, mientras que los navegadores verifican la longitud máxima para garantizar que el usuario no haya ingresado más caracteres de los especificados por este atributo.
atributo de longitud máxima elemento de área de texto HTML es bien compatible con los navegadores, pero minlength no lo es:
Ahora usamos el atributo requerido, que se introdujo en HTML5. Cuando se especifica este atributo, el navegador no permite que se envíen datos del formulario hasta que se complete el campo correspondiente.
La compatibilidad del navegador con el atributo está incompleta. Para proporcionar esta funcionalidad en todos los navegadores, deberá utilizar scripts.
Atributos
Atributos especiales
autocompletar
Le indica al navegador si debe sugerir sugerencias automáticamente al ingresar datos para este control al intentar adivinar lo que el usuario está escribiendo. Para de este atributo elemento HTML Se permiten dos valores en el área de texto, no distinguen entre mayúsculas y minúsculas:
- activado: El navegador debería ofrecer sugerencias automáticamente. Este es el valor predeterminado;
- desactivado: el navegador no debería sugerir opciones automáticamente.
Ejemplo:
enfoque automático
Un valor booleano que indica al navegador que establezca el foco de entrada en el control después de que el documento haya terminado de cargarse o cuando se abra un cuadro de diálogo en el que se muestra el control. Si el atributo tiene el valor " enfoque automático", una cadena vacía (" "), el control tendrá el foco de entrada inmediatamente después de que se cargue la página o el cuadro de diálogo.
Ejemplo:
columnas
El ancho del elemento de control, especificado en términos del número de caracteres según el ancho de los caracteres de la fuente actual. Debido a que los caracteres no siempre tienen el mismo ancho, los navegadores pueden usar varios métodos para redondear este valor.
El valor especificado en este atributo de etiqueta de área de texto en HTML debe ser un número entero mayor que cero. Si el valor falta o tiene formato incorrecto, al atributo se le asignará un valor predeterminado de 20.
Ejemplo:
nombre de directorio
El nombre de un nuevo campo diseñado para transmitir la dirección de entrada del texto. Este atributo, introducido en HTML5, permite a los autores manejar correctamente los valores ingresados en idiomas con diferentes direcciones de escritura. Para hacer esto, agregue un campo separado que se completa junto con el formulario. El nombre del campo actuará como valor del atributo.
Desde esto atributo de área de texto HTML es relativamente nuevo y los navegadores no lo admiten totalmente. Los desarrolladores deben verificar la compatibilidad del navegador al recuperar datos del lado del servidor.
Ejemplo:
desactivado
Valor booleano que indica si está deshabilitado este elemento controlar o no. Si el atributo toma el valor " desactivado" o una cadena vacía (""), entonces el control está deshabilitado.
Los controles deshabilitados están inactivos cuando se muestra el formulario, bloqueados para la interacción del usuario y sus valores ( Si hay alguno) no se transmiten al enviar los datos del formulario.
Ejemplo:
forma
El valor del atributo ID del formulario al que está asociado el área de texto de entrada HTML.
Este atributo es nuevo y se introdujo en HTML5. Ayuda a determinar la propiedad de los controles en formas anidadas o divididas.
Ejemplo:
Introducción:
modo de entrada
Indica qué método de entrada es más adecuado para los usuarios. Ahí hay doce valores posibles, no entre mayúsculas y minúsculas:
- textualmente: entrada alfanumérica de texto latino como nombres de usuario, contraseñas, códigos de productos, etc.;
- latín: entrada latina en el idioma preferido del usuario con conexión SIDA, como llenado automático. Diseñado para transferir datos de los usuarios a una computadora. Por ejemplo, a través del formulario de búsqueda;
- nombre-latín: entrada en latín en el idioma preferido del usuario, con algunas ayudas incluidas. Como autocompletar nombres sugeridos de su lista de contactos y instalación automática registro;
- prosa latina: entrada para la comunicación de persona a persona con finalización automática del texto sugerido y colocación automática letras mayúsculas al comienzo de las oraciones;
- full-width-latin: entrada en latín en el segundo idioma del usuario, con soporte para entrada de caracteres de ancho completo y comunicación de persona a persona, como la finalización automática del texto sugerido y el uso de mayúsculas al principio de las oraciones;
- kana: entrada en kana o romaji, entrada estándar en Hiragana, utilizando entrada de caracteres de tamaño completo con soporte para conversión a Kanji. Diseñado para ingresar texto en japonés;
- nombre-kana: igual que " kana“, pero con la conexión de herramientas auxiliares para ingresar nombres humanos de la lista de contactos;
- katakana: entrada de katakana mediante símbolos y soporte para conversión a kanji. Diseñado para ingresar texto en japonés;
- numérico: ingrese números, incluidas las teclas para los números del 0 al 9, usando carácter especificado, separando miles y símbolo para números negativos. Recomendado para elemento de entrada numérica;
- tel: ingrese números de teléfono, incluidas las teclas numéricas del 0 al 9, el símbolo "#" y el símbolo "*". En algunos áreas locales este es el significado atributo HTML El área de texto puede incluir mnemónicos de letras. Recomendado para el elemento de entrada de número de teléfono;
- correo electrónico: entrada de texto en la configuración regional del usuario mediante pulsaciones de teclas para ingresar una dirección Correo electrónico. Por ejemplo, los símbolos “@” y “. ". Recomendado para el elemento de entrada de dirección de correo electrónico;
- URL: ingrese texto en la configuración regional del usuario usando pulsaciones de teclas para ingresar direcciones. Por ejemplo, los caracteres “/” y “. "y también para entrada rápida partes de nombres de dominio, como "www." o ".co.uk". Recomendado para el control de entrada de URL.
Los navegadores pueden utilizar la información contenida en este atributo para proporcionar herramientas que ayuden al usuario a ingresar datos. por ejemplo, virtuales teclados en pantalla puede proporcionar llaves especiales para el modo de entrada seleccionado.
Ejemplo:
longitud máxima
Número entero que indica cantidad máxima caracteres que pueden contener el valor del control.
Los desarrolladores no deben confiar en el atributo HTML maxlength del área de texto. Es posible que los usuarios puedan enviar datos de formulario a través de un navegador que no admita esta función.
Ejemplo:
longitud mínima
Un número entero que especifica el número mínimo de caracteres que puede contener el valor del control.
Los desarrolladores no deberían confiar en el atributo minlength. Es posible que los usuarios puedan enviar datos de formulario a través de un navegador que no admita esta función.
La compatibilidad del navegador con el atributo minlength es extremadamente débil. Es mejor no confiar en este atributo hasta que mejore el soporte.
Ejemplo:
nombre
El nombre de la etiqueta del área de texto en HTML. El navegador lo enviará al controlador asociado con el contenido del elemento. Estos juntos corresponderán a un par nombre-valor que se utiliza para procesar los datos del formulario.
Ejemplo:
marcador de posición
Texto de sugerencia que muestra cómo se debe completar el campo ( ejemplo o Breve descripción ). Los navegadores pueden mostrar el contenido de un atributo en un control aunque no tenga significado. Cuando el usuario comienza a escribir su propio texto, la información sobre herramientas debe eliminarse del control.
Ejemplo:
solo lectura
Un valor booleano que indica al navegador que evite que el usuario cambie el valor del control. Si el atributo tiene el valor " solo lectura" o una cadena vacía (""), entonces el usuario tiene prohibido cambiar el valor en el control.
Aunque este atributo no permite editar los valores del control, no bloquea todas las acciones: el usuario aún podrá seleccionar y copiar texto en el control.
Ejemplo:
requerido
Un valor booleano que indica si este control se puede dejar en blanco. Si el atributo tiene el valor " requerido" o una cadena vacía (""), entonces el usuario debe completar el control para enviar los datos del formulario.
Si el área de texto de entrada HTML con el atributo requerido no se completa, cuando el usuario intente enviar los datos del formulario, el navegador generará un error y cancelará el envío de los datos.
Soporte del navegador para atributo requerido está incompleto. Los desarrolladores tendrán que depender de scripts para proporcionar esta funcionalidad en todos los navegadores.
Ejemplo:
filas
El número de filas que se mostrarán en el control. Si el texto dentro de un control contiene más líneas de las especificadas por el atributo, el navegador mostrará raya vertical desplácese para que el usuario pueda acceder al contenido oculto.
El valor especificado en este atributo de etiqueta de área de texto en HTML debe ser un número entero mayor que cero. Si el valor falta o tiene Formato erróneo, entonces al atributo se le asignará un valor predeterminado de 2.
Ejemplo:
envoltura
Un valor que le indica al navegador si el texto debe ajustarse al enviar datos del formulario. Hay dos valores que no distinguen entre mayúsculas y minúsculas disponibles para el atributo:
- soft: el texto no se ajustará al enviar datos del formulario, pero puede ajustarse cuando se represente. Este es el valor predeterminado;
- difícil: el texto se ajustará al enviar datos del formulario agregando nuevas líneas. De esta forma la longitud del texto no excederá el ancho del marco.
Este es un atributo de área de texto HTML relativamente nuevo y el soporte está incompleto. Los desarrolladores tendrán que confiar en scripts para proporcionar esta funcionalidad en todos los navegadores.
Ejemplo:
Esta publicación es una traducción del artículo “elemento de área de texto”, preparado por el amigable equipo del proyecto.
Bueno malo
Este artículo se basa en lo siguiente -. Estoy haciendo algunos ajustes y enmiendas a ese artículo, cambiando el orden para mayor claridad y también ofreciendo ejemplos en vivo. Entonces.
Todos los trucos propuestos se dividen en tres grupos: " Ajustes básicos", "Ampliar oportunidades con usando jQuery" y "Resolver el problema de que el texto desaparezca al hacer clic". Comencemos en orden.
Configuración básica del área de texto
Echa un vistazo a la captura de pantalla. Representa el campo de área de texto activo ( navegador de google Cromo). Eliminamos algunas de sus deficiencias en un grado u otro.
Extensibilidad con jQuery
$("textarea").autoResize();
Agregar una esquina para cambiar el tamaño del área de texto. Esto requiere no solo jQuery en sí, sino también jQuery UI. Personalmente, esta loción no me funcionó adecuadamente. Tal vez debería intentar algo más versión jQuery interfaz de usuario
$("área de texto").resizable();
Resolver el problema del texto que desaparece en un área de texto al hacer clic
Solución HTML5: marcador de posición. Este atributo en HTML5 agregará texto gris claro al campo de texto del área de texto (también relevante para entradas de texto) que desaparece cuando hace clic en el área. Si el campo se deja vacío y lo desactiva, el texto aparecerá nuevamente. funciona en Safari 5, Safari Móvil, Chrome 6 y Firefox 4 alfa.
Cambiar el área de texto de fondo haciendo clic. Para aquellos que no tienen marcador de posición, pueden jugar con el fondo. Establezca un fondo para el campo de texto y luego personalice el sugerido código jQuery.
Enfoque(función() ( $(esto).css("fondo", "ninguno") ))
.blur(function() ( if ($(this).value == "") ($(this).css("antecedentes", "url(image.png) no-repeat") ) ));
Cambiar el contenido del área de texto haciendo clic: análogo del marcador de posición en jQuery. Es bastante sencillo de hacer.
$("#ejemplo-tres")
.data("ShuBlog!", $("#ejemplo-tres").text())
.css("color", "#ff9900")
.foco(función() (
var $el = $(esto);
if (este.valor == $el.data("ShuBlog!")) (
this.value = "";
}
})
.desenfoque(función() (
si (este.valor == "") (
this.value = $(this).data("¡ShuBlog!");
}
});
Sin embargo, en el artículo al que había un enlace al principio, el script era más complejo y esto es lo que hizo: comprobó si el atributo de marcador de posición existe y, si la respuesta es positiva, creó un marcador de posición para la etiqueta. , y en el caso de una respuesta negativa, el script que se muestra justo arriba. Realmente no entendí el significado de estas acciones por varias razones.
En primer lugar, si utilizamos jQuery, ¿qué diferencia hay entre el método que elijamos? No creo que esto afecte el rendimiento. Y en segundo lugar, el marcador de posición tiene texto en gris claro, pero ¿y si necesitamos un color diferente? En general no está claro. Sin embargo guión completo Lo traeré.
elemento de funciónSupportsAttribute(elemento, atributo) (
var prueba = document.createElement(elemento);
si (atributo en prueba) (
devolver verdadero;
) demás (
falso retorno;
}
};
$(documento).listo(función())(
if (!elementSupportsAttribute("área de texto", "marcador de posición")) (
$("#ejemplo-tres")
.data("texto original", $("#ejemplo-tres").text())
.css("color", "#ff9900")
.foco(función() (
var $el = $(esto);
if (este.valor == $el.data("textooriginal")) (
this.value = "";
}
})
.desenfoque(función() (
si (este.valor == "") (
this.value = $(this).data("texto original");
}
});
) demás (
$("#ejemplo-tres")
.attr("marcador de posición", $("#ejemplo-tres").text())
.texto("");
}
});
Las primeras 8 líneas son una función para verificar la existencia de un atributo (cualquiera). En la línea 10 comprobamos si el atributo de marcador de posición está presente y, si no, se ejecutan las conocidas líneas 11-24 y, si no, las líneas 26-28. En el original, la línea 28 no me funcionó y la reemplacé por una simplificada: .attr("placeholder", "originalText").
En general, esto es todo lo que quería contaros hoy. A continuación se muestra un enlace con ejemplos.
El artículo presenta varios trucos que quizás no conocías y que te resultarán útiles en tu desarrollo.
1. Una imagen como fondo que desaparece al ingresar texto.
Puedes añadir imagen de fondo como cualquier otro elemento. En este caso, el estilo predeterminado para el área de texto cambia de un borde de 1 px de grosor a un borde biselado. esto esta arreglado indicación explícita borde.
Área de texto (fondo: url(images/benice.png) centro centro sin repetición; borde: 1px sólido #888;)
La imagen de fondo puede afectar la legibilidad del texto. Por lo tanto, la imagen de fondo debe eliminarse al recibir el foco y devolverse si el área de texto se deja sin texto. Por ejemplo, usando jQuery se puede hacer así:
$("textarea") .focus(function() ( $(this).css("antecedentes", "none"); )) .blur(function() ( if ($(this).value == "" ) ( $(this).css("fondo", "url(images/benice.png) centro centro sin repetición"); ) ));
2. Marcador de posición en HTML5
HTML5 tiene un nuevo atributo llamado marcador de posición. El valor de este atributo se muestra en elemento de texto y desaparece cuando recibe el foco, así como cuando se ingresa texto en el elemento.
Marcador de posición HTML5 compatible con los siguientes navegadores: Safari 5, Safari móvil, Chrome 6 y Firefox 4 alfa.
3. Marcador de posición, HTML5 compatible con navegadores antiguos que utilizan jQuery
La forma más sencilla de comprobar si un atributo es compatible con el navegador es comprobarlo mediante javaScript:
Función elementSupportsAttribute(elemento, atributo) ( var prueba = document.createElement(elemento); retorno (atributo en prueba); );
Luego puede escribir código que se activará si el navegador no admite el atributo de marcador de posición.
If (!elementSupportsAttribute("textarea", "placeholder")) ( // Si el navegador no admite el atributo, entonces se ejecuta el código jQuery $("#example-tres") .data("originalText", $( "#ejemplo-tres ").text()) .css("color", "#999") .focus(function() ( var $el = $(this); if (this.value == $el. datos("texto original")) ( this.value = ""; ) )) .blur(function() ( if (this.value == "") ( this.value = $(this).data("texto original" ); ) )) ; ) else ( // Si el navegador es compatible con HTML5, simplemente use esta función $("#example-tres") .attr("placeholder", $("#example-tres").text( )) .texto( "");
4. Eliminar trazo de área de texto
Los navegadores en motores webkit, así como Firefox 3.6, delinean el área de texto cuando tiene el foco. Puede eliminar este esquema utilizando la propiedad CSS de esquema para navegadores webkit. Para Firefox, use la propiedad -moz-appearance, o simplemente puede configurar el elemento como borde o fondo.
Área de texto ( contorno: ninguno; -moz-appearance: ninguno; borde: 1px sólido #999; /* establecer esta propiedad también eliminará el contorno en Firefox */ )
5. Prohibición de cambiar el tamaño
Los navegadores Webkit se agregan al área de texto elemento visual en la esquina inferior derecha, que le permite cambiar el tamaño área de texto. Si desea eliminar esta función, debe utilizar la siguiente propiedad CSS:
Área de texto (cambiar tamaño: ninguno;)
6. Agregar capacidades de cambio de tamaño
jQuery UI le permite agregar capacidades de cambio de tamaño al área de texto. Esto funciona para todos los navegadores y para los navegadores webkit anula el comportamiento predeterminado. Para utilizar esta función, debe conectarse a jquery.ui y escribir el siguiente código:
$("área de texto").resizable();
7. Cambiar el tamaño para adaptarlo al contenido
James Padolsey escribió un práctico script jQuery que le permite cambiar automáticamente el tamaño de un área de texto para que se ajuste a su contenido. Parece que este complemento ya no está disponible, pero puedes usar este, por ejemplo. El complemento contiene muchas configuraciones, pero la forma más sencilla de utilizarlo es:
$("textarea").autoResize();
8.Ahorarap
Para evitar ajustar palabras en líneas nuevas, todos los elementos utilizan la propiedad CSS de espacios en blanco, que no funciona con textarea. Para el área de texto, debe utilizar el atributo de ajuste.
9. Eliminar barras de desplazamiento en IE
IE muestra una barra de desplazamiento vertical para todas las áreas de texto. Puedes ocultarlos usando overflow: hide , pero en este caso no se mostrará cuando se amplíe el contenido. Por tanto, es más correcto utilizar el siguiente enfoque:
Área de texto (desbordamiento: automático;)
En este caso, la barra de desplazamiento no se mostrará cuando todo el texto esté colocado en el área de texto, pero se mostrará si es necesario.
Puedes ver ejemplos para el artículo.
