CSS を使用して動的に展開可能な HTML テキスト入力フィールドを作成する方法

CSS を使用して動的に拡張可能な HTML テキスト入力フィールド

テキスト入力フィールドを作成する場合、CSS を使用して初期サイズを指定できます。ただし、入力時にフィールドを、定義された最大幅まで自動的に拡張することもできます。

コンテンツ編集可能で拡張性を実現する

拡張可能なフィールドを作成する 1 つのアプローチJavaScript を使用しないテキスト入力フィールドは、Content Editable を使用します。このメソッドには次のものが含まれます:

1. CSS: テキスト入力フィールドのサイズとスタイルを定義します:

<code class="css">span {
    border: solid 1px black;
}
div {
    max-width: 200px; 
}</code>

2. HTML: 内部に contenteditable なスパンを含む div 要素を作成します:

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

仕組み:

このソリューションでは、span 要素は次のとおりです。 contenteditable なので、ユーザーはテキストを直接編集できます。入力すると、スパンの幅が div で設定された最大幅 (この場合は 200px) 内で拡大します。スパンの境界線は、テキスト入力領域を視覚的に示します。

編集可能なコンテンツに関する注意:

このメソッドは JavaScript を使用しないソリューションを提供しますが、次の点に注意することが重要です。 contenteditable 要素を使用すると、ユーザーは HTML 要素を貼り付けることができます。このアプローチを選択するときは、この点を考慮してください。

以上がCSS を使用して動的に展開可能な HTML テキスト入力フィールドを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。