입력 필드 너비를 입력에 맞게 동적으로 조정

콘텐츠 길이에 맞게 입력 필드 너비를 동적으로 조정하면 사용자 경험과 지저분한 레이아웃을 방지합니다. 고정 너비를 설정하면 과도한 공간이 생기거나 텍스트가 잘릴 수 있지만 동적 접근 방식은 시각적으로 매력적이고 기능적인 입력 필드를 보장합니다.

안타깝게도 CSS의 min-width 속성을 사용하여 최소 너비를 설정하는 것은 작동하지 않습니다. 입력 필드. 그러나 최신 브라우저는 "ch"(문자 너비)라는 대체 단위를 제공합니다. 이는 글꼴에 독립적이며 모든 글꼴에서 문자 "0"의 너비와 같습니다.

동적 입력 필드 너비를 생성하려면, 다음 JavaScript 코드를 사용할 수 있습니다:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

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

이 코드는 입력 이벤트에 크기 조정 함수를 바인딩합니다. 이 함수는 입력 필드의 너비를 ch 단위의 텍스트 길이와 동일하게 업데이트합니다. 또한 CSS에서 입력 필드 스타일을 다음과 같이 정의할 수 있습니다.

input{ font-size:1.3em; padding:.5em; }

이것은 내용에 따라 자동으로 확장되거나 축소되는 동적으로 조정 가능한 입력 필드 너비의 구현을 완료합니다.