Puis-je spécifier maxlength en css?

85

Puis-je remplacer l'attribut maxlength par quelque chose en CSS?

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

Réponses:

69

Non. Cela doit être fait dans le HTML. Vous pouvez définir la valeur avec Javascript si vous en avez besoin.

Edeverett
la source
126

Non.

maxlength est pour le comportement.

CSS est pour le style.

C'est pourquoi.


la source
De plus, le CSS peut être appliqué globalement à n'importe quelle balise, il n'aurait donc pas de sens d'appliquer une propriété maxlength à un div ou une img, etc.
Dan Diplo
5
Mais que se passe-t-il si vous souhaitez appliquer une propriété maxlength à un ensemble commun de types d'entrée (par exemple, prénom, ville, état) et que vous pouvez avoir plusieurs instances de ces entrées à divers endroits sur le site Web. Ce serait formidable de pouvoir définir une classe (par exemple, 'FirstName') et ils appliquent cette classe à toutes les entrées de prénom <Input class = "FirstName">
Catchops
@Catchops C'est une limitation du HTML, et utiliser CSS pour contourner ce problème serait un truc laid. C'est pourquoi la plupart des frameworks Web fournissent un système de modèles avec des composants personnalisés.
Gabriel
6

Je ne pense pas que vous le puissiez, et CSS est censé décrire à quoi ressemble la page et non ce qu'elle fait, donc même si vous le pouvez, ce n'est pas vraiment la façon dont vous devriez l'utiliser.

Peut-être devriez-vous penser à utiliser JQuery pour appliquer des fonctionnalités communes à vos composants de formulaire?

Charlie
la source
3

Pas avec CSS, mais vous pouvez émuler et étendre / personnaliser le comportement souhaité avec JavaScript.

code_burgar
la source
2

Comme d'autres l'ont répondu, il n'existe actuellement aucun moyen d'ajouter maxlength directement à une classe CSS.

Cependant, cette solution créative peut réaliser ce que vous recherchez.

J'ai le jQuery dans un fichier nommé maxLengths.js que je référence dans site (site.master pour ASP)

exécutez l'extrait pour le voir en action, fonctionne 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" />
Développer l'extrait

L'avantage de l'utiliser: s'il est décidé que la longueur maximale de ce type de champ doit être poussée vers l'extérieur ou vers l'intérieur dans toute votre application, vous pouvez la modifier en un seul endroit. Pratique pour les longueurs de champ pour des éléments tels que les codes client, les champs de nom complet, les champs de courrier électronique, tout champ commun à votre application.

Taylor Brown
la source
1
Ce code est très facile à copier et à coller pour plusieurs types de champs. Je garde un fichier jQuery séparé appelé "maxLengths.js" et je l'inclus dans mon maître de site. Essayez-le, c'est très pratique!
Taylor Brown
Juste parce que vous utilisez une classe HTML, ce n'est pas du CSS.
nyuszika7h
@ nyuszika7h merci pour votre contribution très appréciée à ma réponse. Je dirais que même si je n'applique aucun style à l'élément, j'utilise toujours une feuille de style en cascade dans ma solution, donc CSS est utilisé. de plus, j'ai mis à jour ma réponse pour refléter votre observation.
Taylor Brown
1

À utiliser $("input").attr("maxlength", 4) si vous utilisez jQuery version <1.6 et $("input").prop("maxLength", 4) si vous utilisez jQuery version 1.6+.

Rohit
la source