JavaScript 없이 HTML 텍스트 입력 필드가 자동으로 커질 수 있습니까?

HTML 텍스트 입력 필드가 입력에 따라 자동으로 커지도록 만드는 방법

문제:

사용자에게 텍스트 입력 필드가 필요한 경우가 많습니다. 입력하는 텍스트의 길이에 맞춰 조정할 수 있습니다. 초기 크기 CSS를 설정할 수 있지만 필드가 자동으로 늘어나 최대 너비까지 확장되도록 하는 것이 이상적입니다. 이 기능이 JavaScript 없이 HTML 및 CSS에서 달성 가능한지 확인하는 것이 필수적입니다.

해결책:

놀랍게도 점점 늘어나는 텍스트 입력 필드를 만드는 것이 가능합니다. CSS 및 contenteditable 속성만 사용:

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>

설명:

contenteditable 속성을 ​​사용하면 사용자가 span 요소 내의 텍스트를 편집할 수 있습니다. div 요소의 max-width 속성은 필드가 지정된 너비(이 예에서는 200px)를 초과하지 않도록 보장합니다. 사용자가 입력하면 span 요소는 추가된 텍스트를 수용할 수 있도록 최대 너비까지 자동으로 커집니다.

Contenteditable에 대한 참고 사항:

contenteditable을 사용하면 사용자가 HTML 요소를 필드에 붙여넣을 수 있다는 점을 기억하는 것이 중요합니다. 이 접근 방식을 사용할지 여부를 결정할 때 이 점을 고려하십시오.

위 내용은 JavaScript 없이 HTML 텍스트 입력 필드가 자동으로 커질 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!