Kann ich die maximale Länge in CSS angeben?

84

Kann ich das Attribut maxlength durch etwas in CSS ersetzen?

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

Antworten:

68

Nein, dies muss im HTML erfolgen. Sie können den Wert bei Bedarf mit Javascript festlegen.

edeverett
quelle
125

Nein.

MaxLänge ist für das Verhalten.

CSS ist für das Styling.

Deswegen.


quelle
Außerdem kann CSS global auf jedes Tag angewendet werden, sodass es nicht sinnvoll wäre, eine Maxlength-Eigenschaft auf ein Div oder Img usw. anzuwenden.
Dan Diplo
5
Was aber, wenn Sie eine Maxlength-Eigenschaft auf einen allgemeinen Satz von Eingabetypen (z. B. Vorname, Stadt, Bundesland) anwenden möchten und mehrere Instanzen dieser Eingaben an verschiedenen Stellen über die Website haben können? Es wäre großartig, eine Klasse definieren zu können (z. B. 'Vorname') und sie wenden diese Klasse auf alle Eingaben mit Vornamen an <Input class = "FirstName">
Catchops
@Catchops Das ist eine Einschränkung von HTML, und die Verwendung von CSS, um dies zu umgehen, wäre ein hässlicher Hack. Aus diesem Grund bieten die meisten Webframeworks ein Vorlagensystem mit benutzerdefinierten Komponenten.
Gabriel
6

Ich glaube nicht, dass Sie das können, und CSS soll beschreiben, wie die Seite aussieht und nicht, was sie tut. Selbst wenn Sie könnten, ist es nicht wirklich so, wie Sie sie verwenden sollten.

Vielleicht sollten Sie darüber nachdenken, JQuery zu verwenden, um allgemeine Funktionen auf Ihre Formularkomponenten anzuwenden?

Charlie
quelle
4

Nicht mit CSS, nein.

JMP
quelle
3

Nicht mit CSS, aber Sie können das gewünschte Verhalten mit JavaScript emulieren und erweitern / anpassen.

code_burgar
quelle
2

Wie andere geantwortet haben, gibt es derzeit keine Möglichkeit, einer CSS-Klasse die maximale Länge direkt hinzuzufügen.

Mit dieser kreativen Lösung können Sie jedoch das erreichen, wonach Sie suchen.

Ich habe die jQuery in einer Datei namens maxLengths.js, auf die ich in site verweise (site.master für ASP).

Führen Sie das Snippet aus, um es in Aktion zu sehen. Funktioniert gut.

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" />
Erweitern Sie das Snippet

Der Vorteil dieser Verwendung: Wenn entschieden wird, dass die maximale Länge für diesen Feldtyp in Ihrer gesamten Anwendung heraus- oder hineingeschoben werden muss, können Sie sie an einer Stelle ändern. Dies ist praktisch für Feldlängen wie Kundencodes, vollständige Namensfelder, E-Mail-Felder und alle Felder, die in Ihrer Anwendung häufig verwendet werden.

Taylor Brown
quelle
1
Dieser Code ist sehr einfach zu kopieren und für mehrere Feldtypen einzufügen. Ich behalte eine separate jQuery-Datei mit dem Namen "maxLengths.js" und füge diese in meinen Site-Master ein. Probieren Sie es aus, es ist sehr praktisch!
Taylor Brown
Nur weil Sie eine HTML-Klasse verwenden, handelt es sich nicht um CSS.
Nyuszika7h
@ nyuszika7h danke für deinen geschätzten Beitrag zu meiner Antwort. Ich würde argumentieren, während ich keinen Stil auf das Element anwende, ich verwende immer noch ein kaskadierendes Stylesheet in meiner Lösung, daher wird CSS verwendet. Außerdem habe ich meine Antwort aktualisiert, um Ihre Beobachtung widerzuspiegeln.
Taylor Brown
1

Verwenden $("input").attr("maxlength", 4) Sie diese $("input").prop("maxLength", 4) Option, wenn Sie jQuery Version <1.6 verwenden und wenn Sie jQuery Version 1.6+ verwenden.

Rohit
quelle