How to Expand HTML Text Input Field on Keystroke Without JavaScript?

Expanding HTML Text Input Field on Keystroke Without JavaScript

Expanding the size of a text input field as the user types is a common requirement for text entry forms. While JavaScript or jQuery solutions are often employed, pure CSS and HTML techniques can achieve this functionality.

One approach is to utilize the contenteditable attribute on a span element, allowing the user to edit the content directly. This attribute allows the element to be treated as an editable text area. By setting the max-width property of the containing div element, you can specify the maximum width the input field can reach on expansion.

CSS:

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

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

HTML:

<code class="html">&lt;div&gt;
    &lt;span contenteditable=&quot;true&quot;&gt;sdfsd&lt;/span&gt;
&lt;/div&gt;</code>

By implementing this technique, you can create text input fields that automatically expand as the user enters more text, up to the specified maximum width, without the need for JavaScript or jQuery.

The above is the detailed content of How to Expand HTML Text Input Field on Keystroke Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!