콘텐츠 길이에 따라 입력 필드의 크기를 동적으로 조정하는 방법은 무엇입니까?

입력 필드의 너비를 입력에 맞게 조정

문제: HTML을 사용하여 내용에 맞게 입력 필드의 너비를 수정하는 경우, JavaScript, PHP 또는 CSS는 어려운 것으로 입증되었습니다. min-width 속성은 효과가 없으며 고정 너비는 시각적으로 혼란스러울 수 있습니다.

해결책:

글꼴 독립적 측정인 CSS의 ch 단위 사용을 고려하세요. 0 문자의 너비에 해당합니다. 크기 조정 기능을 입력 이벤트에 바인딩하면 입력 필드의 너비를 동적으로 조정할 수 있습니다.

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input);

function resizeInput() {
  this.style.width = this.value.length + "ch";
}</code>

이를 보완하려면 다음 CSS 스타일을 적용하세요.

<code class="css">input{ font-size:1.3em; padding:.5em; }</code>

이렇게 하면 다음이 보장됩니다. 입력 필드는 원하는 패딩과 글꼴 크기를 유지하면서 콘텐츠의 길이에 맞게 너비를 조정합니다.

위 내용은 콘텐츠 길이에 따라 입력 필드의 크기를 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!