web-dev-qa-db-ja.com

入力タイプ「番号」はサイズ変更されません

タイプをtype="number"に変更しても入力のサイズが変更されないのに、type="text"で機能するのはなぜですか？

例

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

input type numberはsize属性をサポートしていないか、ブラウザに沿って互換性がないようです。代わりにCSSで設定できます。

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

更新されたフィドル

64
Felix

誤った使用法。

上下の矢印で選択可能な値を持つように作成された入力タイプ番号。

したがって、基本的には "width" CSSスタイルを探しています。

歴史的に入力テキストは等幅フォントでフォーマットされているため、サイズと幅も同じです。

新しい番号を入力し、「size」プロパティには意味がありません*。典型的な使用法：

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

w3c docs

修正するには、スタイルを追加します。

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

編集：範囲が必要な場合は、type="range"ではなく="number"を設定する必要があります

EDIT2：*サイズは許容値ではありません（したがって、意味がありません）。公式を確認してください W3C仕様

注：サイズ属性は、テキスト、検索、電話番号、URL、電子メール、およびパスワードの入力タイプで機能します。

ヒント：要素で許可される最大文字数を指定するには、maxlength属性を使用します。

37
MrPk

長さを設定するのではなく、数値入力の最大値と最小値を設定します。

入力ボックスは、最長の有効な値に合わせてサイズ変更されます。

3桁の数字を許可する場合は、999を最大値として設定します

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

<input type=number> の場合、HTML5 CRにより、size属性は許可されません。ただし、 Obsolete features では、「著者はすべきではありませんが、この仕様の他の部分の要件に反して、型属性がNumber状態にある入力要素にmaxlength属性とsize属性を指定できます。関係なくこれらの属性を使用する正当な理由の1つは、type = "number"の入力要素をサポートしない従来のユーザーエージェントが有用な幅でテキストフィールドをレンダリングできるようにすることです。」

したがって、size属性を使用できますが、type=numberをサポートしない古いブラウザーにのみ影響するため、要素は単純なテキストコントロール<input type=text>にフォールバックします。

この背後にある理論的根拠は、ブラウザが使いやすさのために、他の属性を考慮に入れるユーザーインターフェースを提供することが期待されるということです。実装が異なる場合があるため、作成者が課すサイズは混乱を招く可能性があります。 （これは、CSSのコントロールの幅の設定にも適用されます。）

結論は、要素の寸法についての仮定を行わない、多少流動的なセットアップで<input type=number>を使用する必要があるということです。

5
Jukka K. Korpela