¿Puedo especificar maxlength en css?

85

¿Puedo reemplazar el atributo maxlength con algo en CSS?

<input type='text' id="phone_extension" maxlength="4" />
html css Brian Ramsay
fuente

Respuestas:

69

No. Esto debe hacerse en HTML. Sin embargo, puede establecer el valor con Javascript si es necesario.

edeverett
fuente
126

No.

maxlength es por comportamiento.

CSS es para diseñar.

Es por eso que.


fuente
Además, CSS se puede aplicar globalmente a cualquier etiqueta, por lo que no tendría sentido tener una propiedad maxlength aplicada a un div o img, etc.
Dan Diplo
5
Pero, ¿qué sucede si desea aplicar una propiedad maxlength a un conjunto común de tipos de entrada (por ejemplo, nombre, ciudad, estado) y puede tener varias instancias de esas entradas en varios lugares a través del sitio web? Sería genial poder definir una clase (por ejemplo, 'Nombre') y aplicar esa clase a todas las entradas de nombre <Input class = "FirstName">
Catchops
@Catchops Esa es una limitación de HTML, y usar CSS para solucionar esto sería un truco feo. Es por eso que la mayoría de los frameworks web proporcionan un sistema de plantillas con componentes personalizados.
Gabriel
6

No creo que puedas, y se supone que CSS describe cómo se ve la página, no lo que hace, por lo que incluso si pudieras, no es realmente la forma en que deberías usarla.

¿Quizás debería pensar en usar JQuery para aplicar una funcionalidad común a los componentes de su formulario?

Charlie
fuente
4

No con CSS, no.

JMP
fuente
3

No con CSS, pero puede emular y ampliar / personalizar el comportamiento deseado con JavaScript.

code_burgar
fuente
2

Como han respondido otros, no existe una forma actual de agregar maxlength directamente a una clase CSS.

Sin embargo, esta solución creativa puede lograr lo que busca.

Tengo jQuery en un archivo llamado maxLengths.js al que hago referencia en el sitio (site.master para ASP)

ejecute el fragmento para verlo en acción, funciona bien.

jquery, css, html:

$(function () {
    $(".maxLenAddress1").keypress(function (event) {

        if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
            return false;
        } else {
            return true;
        }

    });
});
.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" class="maxLenAddress1" />
Expandir fragmento

La ventaja de usar esto: si se decide que la longitud máxima para este tipo de campo debe eliminarse o en toda la aplicación, puede cambiarla en un solo lugar. Es útil para la longitud de los campos para cosas como códigos de cliente, campos de nombre completo, campos de correo electrónico, cualquier campo común en su aplicación.

Taylor Brown
fuente
1
Este código es muy fácil de copiar y pegar para múltiples tipos de campos. Guardo un archivo jQuery separado llamado "maxLengths.js" y lo incluyo en el maestro de mi sitio. Pruébelo, ¡es muy conveniente!
Taylor Brown
El hecho de que use una clase HTML no es CSS.
nyuszika7h
@ nyuszika7h gracias por su muy apreciada aportación a mi respuesta. Yo diría que mientras no estoy aplicando ningún estilo al elemento, todavía estoy usando una hoja de estilo en cascada en mi solución, por lo tanto, se está utilizando CSS. Además, he actualizado mi respuesta para reflejar su observación.
Taylor Brown
1

Úselo $("input").attr("maxlength", 4) si está usando jQuery versión <1.6 y $("input").prop("maxLength", 4) si está usando jQuery versión 1.6+.

Rohit
fuente