1. ホーム
  2. ハイパーリンク

[解決済み】Chromeでtype="number "の入力でmaxlengthが無視される。

2022-03-25 17:29:26

質問

maxlength 属性は <input type="number"> . この現象は、Chromeでのみ発生します。

<input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>

解決方法は?

から に関するMDNのドキュメント <input>

<ブロッククオート

の値が、1,000を超える場合は タイプ 属性が text , email , search , password , tel または url この属性は、ユーザーが入力できる最大文字数(ユニコード・コード・ポイント)を指定します; 他のコントロール・タイプでは、これは無視されます。

そこで maxlength は無視されます。 <input type="number"> を指定します。

ニーズに応じて minmax 属性を インオン で提案されているように(注意: これは制約された範囲を定義するだけで、値の実際の文字の長さは定義しません。-9999から9999はすべての0-4桁の数字をカバーします)、もしくは通常のテキスト入力を使用して、新しい pattern 属性で指定します。

<input type="text" pattern="\d*" maxlength="4">