html - HTML入力タイプのテキストサイズの問題

Question

HTML形式の入力フィールドがあります

<input type="text" size="30">

30 char のみを表示したいので、サイズを 30 に設定します。

ただし、テキスト フィールドの動作は、入力として入力された char によって異なります。表示される char は 30 未満です。30 を超える場合もあります。

例えば ​​：

入力 123456789012345678901234567890 すると、30文字あるのに28文字しか表示されません

文字だけで入力するlと、50文字近く入力できます

これの原因は何ですか？理解できません。誰か考えがありますか？各文字がフォームに表示するために異なるスペースを必要とすることを知りたいですか?

Answer 1

文字の幅 (より正確にはグリフの幅) は、狭い「i」から広い「W」まで、一般的に大きく異なります。このsize属性は、表示幅を「平均的な」文字数として設定します。これはあいまいな概念 (平均的なものは何ですか?) であり、ブラウザーによって解釈が異なります。

一部のフォントのみ、すべての文字の幅が同じです。このようなフォントは「モノスペース」と呼ばれ、一般に読みにくく、テキストがタイプライターで書かれたように見える場合がありますが、それでも用途はあります。font-family: Consolas, monospace幅を 30 文字にするには、input要素に次のように設定することを検討してください。

Answer 2

試す

<input type="text" maxlength="30">

size と maxlength の両方の違いのデモ