콘텐츠 길이에 맞게 입력 필드의 크기를 동적으로 조정하려면 어떻게 해야 합니까?

입력 길이에 맞게 입력 필드 크기 조정

입력 필드의 너비를 입력과 정확히 일치하도록 조정하는 것은 까다로운 작업일 수 있습니다. min-width를 사용하여 최소 너비를 설정하는 기존 접근 방식이 항상 원하는 결과를 얻지 못할 수도 있지만, 이 문제를 극복할 수 있는 대체 솔루션이 있습니다.

CSS 단위: ch

최신 브라우저는 현재 글꼴에서 문자 "0"(영)의 너비를 나타내는 CSS 단위 "ch"를 지원합니다. 이 장치는 글꼴 독립적이므로 입력 필드의 최소 너비를 정의하는 안정적인 방법을 제공합니다.

JavaScript 크기 조정 기능

입력에 따라 너비를 동적으로 조정하려면 길이를 지정하려면 다음 JavaScript 함수를 사용할 수 있습니다.

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

이 함수는 입력 값을 검색하고 "ch" 단위, 입력을 수용하기 위해 필드가 확장되거나 축소되도록 합니다.

입력 이벤트에 바인딩

크기 조정 기능을 트리거하려면 이를 "입력"에 바인딩합니다. " 이벤트:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

이러한 기술을 적용하면 입력에 따라 너비를 유동적으로 조정하는 입력 필드를 만들 수 있습니다. 더욱 사용자 친화적이고 역동적인 경험을 제공합니다.

위 내용은 콘텐츠 길이에 맞게 입력 필드의 크기를 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!