Posso specificare maxlength in css?

85

Posso sostituire l'attributo maxlength con qualcosa in CSS?

<input type='text' id="phone_extension" maxlength="4" />

html css

— Brian Ramsay
fonte

69

No. Questo deve essere fatto nell'HTML. Tuttavia, puoi impostare il valore con Javascript se necessario.

— edeverett
fonte

126

No.

maxlength è per il comportamento.

CSS è per lo styling.

È per questo.

Inoltre, i CSS possono essere applicati globalmente a qualsiasi tag, quindi non avrebbe senso applicare una proprietà maxlength a un div o img ecc.

— Dan Diplo,

5

Ma cosa succede se si desidera applicare una proprietà maxlength a un insieme comune di tipi di input (ad es. Nome, città, stato) e si possono avere più istanze di tali input in vari punti del sito web. Sarebbe fantastico poter definire una classe (ad es. "FirstName") e applicare quella classe a tutti gli input del nome <Input class = "FirstName">

— Catchops

@Catchops Questa è una limitazione dell'HTML, e usare CSS per aggirare questo sarebbe un brutto trucco. Ecco perché la maggior parte dei framework Web fornisce un sistema di modelli con componenti personalizzati.

— Gabriel

12

Puoi usare jQuery come:

$("input").attr("maxlength", 4)

Ecco una demo: http://jsfiddle.net/TmsXG/13/

— macio.Jun
fonte

6

Non credo che tu possa, e CSS dovrebbe descrivere l'aspetto della pagina non quello che fa, quindi anche se potessi, non è proprio come dovresti usarlo.

Forse dovresti pensare di utilizzare JQuery per applicare funzionalità comuni ai componenti del modulo?

— Charlie
fonte

4

Non con CSS, no.

— JMP
fonte

3

Non con CSS, ma puoi emulare ed estendere / personalizzare il comportamento desiderato con JavaScript.

— code_burgar
fonte

2

Come altri hanno risposto, non esiste attualmente un modo per aggiungere maxlength direttamente a una classe CSS.

Tuttavia, questa soluzione creativa può ottenere ciò che stai cercando.

Ho jQuery in un file chiamato maxLengths.js a cui faccio riferimento nel sito (site.master per ASP)

eseguire lo snippet per vederlo in azione, funziona bene.

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" />

Espandi lo snippet

Il vantaggio di utilizzare questo: se si decide che la lunghezza massima per questo tipo di campo deve essere spinta fuori o dentro l'intera applicazione, è possibile modificarla in un punto. È utile per le lunghezze dei campi per cose come codici cliente, campi nome completo, campi email, qualsiasi campo comune nella tua applicazione.

— Taylor Brown
fonte

1

Questo codice è molto facile da copiare e incollare per più tipi di campo. Tengo un file jQuery separato chiamato "maxLengths.js" e lo includo nel master del sito. Provalo, è molto comodo!

— Taylor Brown

Solo perché usi una classe HTML non è CSS.

— nyuszika7h

@ nyuszika7h grazie per il tuo apprezzatissimo contributo alla mia risposta. direi che mentre non sto applicando alcuno stile all'elemento, sto ancora utilizzando un foglio di stile a cascata nella mia soluzione, quindi viene utilizzato CSS. inoltre ho aggiornato la mia risposta per riflettere la tua osservazione.

— Taylor Brown

1

Usalo $("input").attr("maxlength", 4) se stai usando jQuery versione <1.6 e $("input").prop("maxLength", 4) se stai usando jQuery versione 1.6+.

— Rohit
fonte