CSS を使用して動的に拡張可能な HTML テキスト入力フィールド
テキスト入力フィールドを作成する場合、CSS を使用して初期サイズを指定できます。ただし、入力時にフィールドを、定義された最大幅まで自動的に拡張することもできます。
コンテンツ編集可能で拡張性を実現する
拡張可能なフィールドを作成する 1 つのアプローチJavaScript を使用しないテキスト入力フィールドは、Content Editable を使用します。このメソッドには次のものが含まれます:
<code class="css">span { border: solid 1px black; } div { max-width: 200px; }</code>
<code class="html"><div> <span contenteditable="true">sdfsd</span> </div></code>
仕組み:
このソリューションでは、span 要素は次のとおりです。 contenteditable なので、ユーザーはテキストを直接編集できます。入力すると、スパンの幅が div で設定された最大幅 (この場合は 200px) 内で拡大します。スパンの境界線は、テキスト入力領域を視覚的に示します。
編集可能なコンテンツに関する注意:
このメソッドは JavaScript を使用しないソリューションを提供しますが、次の点に注意することが重要です。 contenteditable 要素を使用すると、ユーザーは HTML 要素を貼り付けることができます。このアプローチを選択するときは、この点を考慮してください。
以上がCSS を使用して動的に展開可能な HTML テキスト入力フィールドを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。