10

テキストエリアと入力テキストの属性colsと属性の動作を丁寧に理解しようとしています。sizeそれは簡単なことですが、列とサイズの値が同じである場合、なぜそれらの幅が異なるのかわかりませんか?

ドキュメントによると、両方の属性は、指定された数の文字が内部に収まるように要素のサイズを変更する必要があります。

... size属性は、入力要素の表示幅を文字数で指定します。[ソース - w3schools]

cols属性と rows 属性 (...)は、テキスト領域を作成する高さと行の幅を指定することに注意してください。値は文字単位で測定されます 。[ソース - w3]

ただし、両方の要素に同じ値を割り当てようとすると、幅が異なります。入力フィールドが小さすぎて、指定された文字数とテキストエリアに対応できません。広すぎます。最も重要なことは、両方の幅が異なることです。

例えば：

<input type="text" size=40>
<textarea cols="40"></textarea>

生成:

textarea cols 入力テキストサイズ

ここを参照してください - http://jsfiddle.net/yjERR/

Chrome 29 と Firefox 24 の両方でこれを試しました。

幅がフォント スタイルに依存することは理解していますが、両方の要素の幅を同じにするべきではありませんか? 内部要素のマージンまたは他の何かがこの違いを引き起こしていますか?

アップデート

2 つの要素のフォント スタイルが異なるようですが、同じ font-family と font-size を割り当てても、異なる幅が生成されます。

ここに画像の説明を入力

更新されたフィドル

4

3 に答える 3

7

ほとんどのフォントでは文字の幅が異なるため、「文字の表示幅」はあいまいな表現です。したがって、モノスペース フォントを使用しない限り、正確な文字数に対応するコントロールを取得することは期待できません。

との幅を異ならせる基本的なことが 2 つinputありtextareaます。まず、デフォルトのフォント フェイスが異なります。ほとんどのブラウザでは、 はモノスペース フォントtextarea、 はサンセリフ フォントです。inputこれにより、同じフォントサイズでも幅が異なります。次に、textareaウィジェットの右側に、必要に応じて垂直スクロール バーに使用される小さな領域が含まれます。事実上、要素はoverflow: autoデフォルトで持っています。を使用して削除することもできますがoverflow: hidden、ユーザーが領域に収まる行をさらに入力すると、大きな問題が発生します。

本当に要素の幅を均等にしたい場合 (そうすべきではないと思います)、フォントと幅を明示的に設定できます。

input, textarea{  
    font-family: Arial, sans-serif;
    font-size: 100%;
    width: 26em; /* fallback for the next one, for browsers not recognizing ch */
    width: 40ch; /* sets the width to 40 times the width of the digit “0” */
}
于 2013-09-20T06:12:45.210 に答える