입력할 때 입력 필드를 늘리거나 줄이는 방법

CSS로 작업을 많이 했다면 입력 필드가 그 안의 내용에 맞도록 만들 때 입력 필드가 다른 HTML 요소처럼 작동하지 않는다는 것을 알아차렸을 것입니다. 이 기사에서는 약간의 CSS 및 JavaScript를 사용하여 입력할 때 입력 필드를 늘리거나 줄이는 간단한 트릭을 보여 드리겠습니다.

마크업의 경우 입력과 범위가 필요합니다.

<input type="text">
<span></span>

이제 콘텐츠에 몇 가지 스타일을 적용해 보겠습니다.

input[type="text"],
span {
    font-family:  'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.75rem;
    border: 2px solid #666;
    /* box-sizing: border-box; */
    /* padding: 0.5em 1em; */
}

input[type="text"] {
    width: 6em;
    padding: 0.5em 1em;

    color: #555;
    border-radius: 2em;
    outline: 0;
}

input[type="text"]:focus {
    border-color: #ff7996;
}

span {
    position: absolute;
    left: -9999px;
    display: inline-block;
    min-width: 6em;
}

여기서 한 가지 주의할 점이 있습니다. 입력 필드에 적용된 테두리 및 글꼴 속성은 스팬에도 적용해야 하며, box-sizing를 border-box로 설정한 경우 패딩도 스팬과 입력 모두에 적용해야 합니다. 이유를 알 수 있습니다. JavaScript로 이동할 때. 범위에 min-width를 설정하고 입력 필드에 width를 설정했습니다. 이는 입력 필드에 대해 미리 정의된 너비를 갖도록 하여 해당 너비 아래로 축소되지 않도록 합니다. 범위를 숨기고 입력 필드를 보기 좋게 만드는 다른 스타일이 있습니다.

이제 실제 트릭으로 이동하겠습니다.

const input = document.querySelector('input');
const span = document.querySelector('span');

input.addEventListener('input', function (event) {
    span.innerHTML = this.value.replace(/\s/g, ' ');
    this.style.width = span.offsetWidth + 'px';
});

위의 코드에서 텍스트 입력에 대한 입력 이벤트를 수신한 다음 범위의 내용을 입력의 내용으로 바꿉니다. HTML에서 여러 공백이 단일 공백으로만 렌더링된다는 사실 때문에 this.value의 공백도 &nbsp로 바꿉니다. 그런 다음 범위의 너비를 입력 필드에 적용합니다.

다음과 같이 표시됩니다.



이 기사가 도움이 되었기를 바랍니다.
질문이나 추가 사항이 있습니까? 아래에 의견을 남겨주세요.