Warum ignoriert Chrome das Attribut "Größe" der Texteingabe?

Question

Das folgende Größenattribut hat keinerlei Auswirkungen. Warum?

<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba"> 

Es ist standardmäßig 60 Zeichen und es gibt scheinbar nichts, was ich tun kann, um das zu ändern.

Answer 1

Vermutlich haben Sie etwas Styling, das es beeinflusst. Ohne irgendwelche Stilregeln, es works just fine. Aber wenn Sie eine Stilregel mit einer kleineren Größe anwenden, that takes precedence.

Um herauszufinden, welche Stilregel sich darauf auswirkt, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Element prüfen". Sehen Sie sich dann die rechts angezeigten Gestaltungsinformationen an.

Answer 2

Verwenden Sie ein textarea Element anstelle des input Element:

<textarea cols="80" rows="1" style="overflow: visible" placeholder= 
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea> 

Diese konsequenter produziert, wenn auch nicht vollständig konsistent Rendering. Die Einstellung overflow: visible ist da, um IE Platz für 80 Zeichen zu reservieren, sonst passen nur 79 aufgrund der vertikalen Bildlaufleiste.

Warum tritt das Problem scheint mit input:

Das Attribut size="80" setzt die sichtbare Breite des Feldes auf die „durchschnittliche“ Breite von 80 Zeichen. Dies ist nicht genau definiert (was "Durchschnitt"?), Und Browser implementieren es sogar unlogisch: mit size="80" neigt dazu, erheblich weniger Breite als 4 Mal die Standardbreite von 20 Zeichen zu geben. Also ist der Browser nicht einmal konsistent. Der Anteil ist abhängig von der Schriftart und vom Browser. (Dies geschieht auf anderen Browsern als auch.)

Wenn Sie halten müssen mit input:

Sie style="width: 80ch" nutzen könnten, aber nicht alle Browser unterstützen diese CSS3-Funktion, und es gibt keine Garantie, dass es umgesetzt wurde richtig. Die ch Einheit ist definitionsgemäß die Fortschrittsbreite der Ziffer Null, '0', die in den meisten Schriftarten die gleiche ist wie die Fortschrittsbreite von Ziffern im Allgemeinen. (Z. B. Firefox implementiert fast das. Fast, aber nicht ganz.)

Sie könnten die Schriftart in <input> Elemente auf einige Monospace-Schriftart festlegen. Dadurch wird das Problem nicht behoben, die Breiten werden jedoch näher an die angegebenen Breiten gebracht.

Answer 3

Ab Goggle Chrome 26 unter Mac OS Lion wird die "ch" -Einheit nicht unterstützt. Bei einem Element, das mit dem Inline-Stil "width: 16ch" überprüft wurde, wird der Stil als "Ungültiger Eigenschaftswert" markiert. Andere gebräuchliche Einheiten (pt, px, em,%) werden akzeptiert.

Answer 4

Wenn Sie sich fragen, warum können Sie 60 Zeichen eingeben, die Eigenschaft, dass das bestimmt, wie viele Zeichen genannt wird maxlength:

Maxlength

Wenn der Wert des Typattribut ist Text, E-Mail, Suche, Passwort, Tel oder URL. Dieses Attribut gibt die maximale Anzahl von Zeichen (in Unicode-Codepunkten) an, die der Benutzer eingeben kann. Für andere Kontrolltypen wird es ignoriert. Es kann den Wert des Attributs size überschreiten. Wenn es nicht angegeben ist, kann der Benutzer eine unbegrenzte Anzahl von Zeichen eingeben.Die Angabe einer negativen Zahl führt zum Standardverhalten. das heißt, der Benutzer kann eine unbegrenzte Anzahl von Zeichen eingeben. Die Einschränkung wird nur ausgewertet, wenn der Wert des Attributs geändert wurde.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Größe nur die Breite in Zeichen bestimmt, nicht die Menge Benutzer eingeben.

Answer 5

Ich hatte das gleiche Problem und nachdem ich viele andere Lösungen ausprobiert habe, habe ich das durch Hinzufügen einer Breite zu den Eingabefeldern behoben.

input { 
    width:90px; /* Your width may vary */ 
}