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

Patricia Arquette
リリース: 2024-11-03 18:57:02
オリジナル
887 人が閲覧しました

How to Create a Dynamically Expandable HTML Text Input Field Using CSS?

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

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

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

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

  1. CSS: テキスト入力フィールドのサイズとスタイルを定義します:
<code class="css">span {
    border: solid 1px black;
}
div {
    max-width: 200px; 
}</code>
ログイン後にコピー
  1. 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート