Der Eingabetyp "Nummer" wird nicht in der Größe geändert

Warum wird die Größe meiner Eingabe nicht geändert, wenn ich den Typ in ändere, type="number"aber es funktioniert mit type="text"?

BEISPIEL

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">

Anscheinend unterstützt der inputTyp numberkein sizeAttribut oder ist nicht mit Browsern kompatibel. Sie können ihn stattdessen über CSS festlegen:

input[type=number]{
    width: 80px;
} 

Geige aktualisiert

Falsche Verwendung.

Geben Sie die Nummer des Eingabetyps so ein, dass der Wert über die Pfeile nach oben und unten ausgewählt werden kann.

Sie suchen also im Grunde nach einem CSS-Stil mit "Breite".

Eingabetext wird historisch mit monospaced Schriftart formatiert, daher ist Größe auch die Breite, die es benötigt.

Die Eingabenummer ist neu und die Eigenschaft "Größe" hat überhaupt keinen Sinn *. Eine typische Verwendung:

<input type="number" name="quantity" min="1" max="5">

w3c docs

Fügen Sie zum Korrigieren einen Stil hinzu:

<input type="number" name="email" style="width: 7em">

BEARBEITEN: Wenn Sie einen Bereich möchten, müssen Sie festlegen type="range"und nicht="number"

EDIT2: * Größe ist kein zulässiger Wert (also kein Sinn). Lesen Sie die offiziellen W3C-Spezifikationen

Hinweis: Das Größenattribut funktioniert mit den folgenden Eingabetypen: Text, Suche, Telefon, URL, E-Mail und Kennwort.

Tipp: Verwenden Sie das Attribut maxlength, um die maximal zulässige Anzahl von Zeichen im Element anzugeben.

Anstatt die Länge festzulegen, legen Sie die Max- und Min-Werte für die Zahleneingabe fest.

Das Eingabefeld wird dann an den längsten gültigen Wert angepasst.

Wenn Sie eine dreistellige Nummer zulassen möchten, stellen Sie 999 als max

 <input type="number" name="quantity" min="0" max="999">

Für <input type=number>die HTML5-CR ist das sizeAttribut nicht zulässig. In veralteten Funktionen heißt es jedoch: „Autoren sollten die Attribute maxlength und size für Eingabeelemente, deren Typattribute sich im Status Number befinden, nicht angeben, können dies jedoch trotz gegenteiliger Anforderungen an anderer Stelle in dieser Spezifikation angeben. Ein gültiger Grund für die Verwendung dieser Attribute ist, dass ältere Benutzeragenten, die keine Eingabeelemente mit type = "number" unterstützen, das Textfeld weiterhin mit einer nützlichen Breite rendern können.

Somit kann das sizeAttribut verwendet werden, es betrifft jedoch nur ältere Browser, die dies nicht unterstützen type=number, so dass das Element auf ein einfaches Textsteuerelement zurückgreift <input type=text>.

Der Grund dafür ist, dass vom Browser erwartet wird, dass er eine Benutzeroberfläche bereitstellt, die die anderen Attribute für eine gute Benutzerfreundlichkeit berücksichtigt. Da die Implementierungen variieren können, kann jede von einem Autor auferlegte Größe die Dinge durcheinander bringen. (Dies gilt auch für das Festlegen der Breite des Steuerelements in CSS.)

Die Schlussfolgerung ist, dass Sie <input type=number>in einem mehr oder weniger flüssigen Setup verwenden sollten, das keine Annahmen über die Abmessungen des Elements macht.

Was du willst ist maxlength.

Gültig für text, search, url, tel, email, und passworddefiniert sie die maximale Anzahl von Zeichen (als UTF-16 Code - Einheiten) der Benutzer in das Feld eingeben. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn keine maximale Länge oder ein ungültiger Wert angegeben ist, hat das Feld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert der Minenlänge sein.

Sie könnten einen dieser inputTypen in Betracht ziehen .

Verwenden Sie ein Ereignis on onkeypress. Beispiel für eine Postleitzahlbox. Es erlaubt maximal 5 Zeichen und überprüft, ob die Eingabe nur aus Zahlen besteht.

Natürlich geht nichts über eine serverseitige Validierung, aber dies ist ein guter Weg.

function validInput(e) {
  e = (e) ? e : window.event;
  a = document.getElementById('zip-code');
  cPress = (e.which) ? e.which : e.keyCode;

  if (cPress > 31 && (cPress < 48 || cPress > 57)) {
    return false;
  } else if (a.value.length >= 5) {
    return false;
  }

  return true;
}

#zip-code {
  overflow: hidden;
  width: 60px;
}

<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">

Ändern Sie type = "number" in type = "tel".