HTML 텍스트 입력 필드가 입력할 때 자동으로 커지게 하는 방법

텍스트를 입력할 때마다 입력 필드가 자동으로 늘어나게 하고 싶다면 일반적인 <input> 대신 <span> 요소를 활용하는 것이 효과적입니다. 핵심은 <span>에 다음 속성을 설정하여 사용자가 직접 내용을 편집할 수 있도록 만드는 것입니다.

contenteditable="true"

이 속성을 지정하면 브라우저에서 해당 요소가 마치 텍스트 필드처럼 동작하며, 입력되는 내용의 길이에 따라 요소의 크기가 자연스럽게 조절됩니다.

예제 코드

아래는 전체 예제 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
   span{
      border: solid 2px skyblue;
   }
   div{
      max-width: 500px;
   }
</style>
</head>
<body>
<div>
<span contenteditable="true">John Smith</span>
</div>
<script>
</script>
</body>
</html>

실행 방법

위 프로그램을 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그런 다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 됩니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

HTML 텍스트 입력 필드가 입력할 때 자동으로 커지게 하는 방법

화면에 표시된 영역을 클릭하고 텍스트를 계속 입력해 보세요. 입력하는 글자 수가 늘어날수록 파란색 테두리로 표시된 <span> 영역이 자동으로 넓어지는 것을 확인할 수 있습니다. 이처럼 contenteditable 속성만으로 별도의 JavaScript 코드 없이도 입력에 따라 커지는 텍스트 필드를 간단하게 구현할 수 있습니다.