JavaScript を使用せずにキーストロークで HTML テキスト入力フィールドを展開する方法

JavaScript を使用せずにキーストロークで HTML テキスト入力フィールドを拡張する

ユーザーの入力に応じてテキスト入力フィールドのサイズを拡張することは、一般的な要件です。テキスト入力フォーム。 JavaScript または jQuery ソリューションがよく使用されますが、純粋な CSS および HTML テクニックでもこの機能を実現できます。

1 つのアプローチは、span 要素の contenteditable 属性を利用して、ユーザーがコンテンツを直接編集できるようにすることです。この属性により、要素を編集可能なテキスト領域として扱うことができます。含まれる div 要素の max-width プロパティを設定することで、展開時に入力フィールドが到達できる最大幅を指定できます。

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>

この手法を実装すると、JavaScript を使用せずに、ユーザーがさらにテキストを入力すると、指定された最大幅まで自動的に拡張するテキスト入力フィールドを作成できます。または jQuery。

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