HTML テキスト入力フィールドは JavaScript なしで自動的に拡張できますか?

入力中に HTML テキスト入力フィールドを自動的に拡張する方法

問題:

ユーザーはテキスト入力フィールドを必要とすることがよくあります入力するテキストの長さに適応できます。 CSS の初期サイズを設定することもできますが、フィールドを自動的に拡大して、最大幅まで拡張することが理想的です。この機能が HTML と CSS で、できれば JavaScript を使用せずに実現可能かどうかを判断することが重要です。

解決策:

驚くべきことに、拡大するテキスト入力フィールドを作成することが可能です。 CSS と contenteditable 属性のみを使用:

CSS:

<code class="css">span {
    border: solid 1px black;
}

div {
    max-width: 200px;
}</code>

HTML:

<code class="html"><div>
    <span contenteditable="true">sdfsd</span>
</div></code>

説明:

contenteditable 属性を使用すると、ユーザーは span 要素内のテキストを編集できます。 div 要素の max-width プロパティにより、フィールドが指定された幅 (この例では 200px) を超えないようになります。ユーザーが入力すると、span 要素は追加されたテキストに合わせて最大幅まで自動的に拡大します。

Contenteditable に関する注意:

contenteditable を使用すると、ユーザーは HTML 要素をフィールドに貼り付けることができるということを覚えておくことが重要です。このアプローチを使用するかどうかを決定するときは、この点を考慮してください。

以上がHTML テキスト入力フィールドは JavaScript なしで自動的に拡張できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。