내용에 따라 입력 필드 너비를 동적으로 조정하는 방법은 무엇입니까?

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

"최소 너비"를 사용하여 입력 필드의 최소 너비를 설정하려고 하면 그렇지 않습니다. 예상대로 작동하지 않으면 대체 솔루션이 필요합니다. 그러한 해결책 중 하나는 특정 글꼴에서 문자 "0"의 너비를 나타내는 'ch' CSS 단위를 활용하는 것입니다.

최신 브라우저에서는 다음 CSS를 사용할 수 있습니다.

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

내용에 따라 입력 필드의 너비를 조정하려면 JavaScript 함수를 "입력" 이벤트에 바인딩할 수 있습니다.

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

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

이 JavaScript 함수는 입력 필드의 너비를 일치하도록 변경합니다. 패딩을 수용하기 위해 해당 값의 길이에 1 'ch'를 더한 것입니다. 이벤트 리스너는 입력 값이 변경될 때마다 너비가 업데이트되도록 보장합니다.

참고: 이 접근 방식은 'ch' 단위의 브라우저 호환성 문제로 인해 모든 시나리오에 적합하지 않을 수 있습니다. 원하는 기능을 보장하려면 항상 다양한 브라우저와 운영 체제에서 코드를 테스트하세요.

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