IT 개발/web 개발
javascript - 텍스트 박스 안에 내가 넣은 텍스트 수를 카운팅 해보자
여행과 투자
2025. 6. 9. 23:30
728x90
반응형
우리가 텍스트 박스를 만들때 (id 입력란)
최대 글자수가 제한되어 있다면,
내가 적는 글자 수 에 맞춰서 '남은 글자 수'가 점점 줄어들 것이다
<body>
<form>
<div class="control">
<label for="product-name">Product Name</label>
<input type="text" id="product-name" name="product-name" maxlength="50">
<span id="charcount">
<span id="remaining-chars">50</span>/50
</span>
</div>
<button>Submit</button>
</form>
</body>우선 HTML 형식을 이렇게 만들어서 텍스트 입력란 - 텍스트 카운팅 형식으로 만들어두자
이렇게 하면 50/50의 텍스트를 카운팅 할 수 있는 박스가 만들어진다
이때 카운팅 텍스트를 실시간으로 변경 할 수 있도록 javascript를 만들어 주자
let productNameInputElement = document.getElementById('product-name');
let remainingCharsElement = document.getElementById('remaining-chars');
let maxAllowedChars = productNameInputElement.maxLength;
function updateRemainingCharacters(event){
let enteredText = event.target.value;
let enteredTextLength = enteredText.length;
let remainingCharacters = maxAllowedChars - enteredTextLength;
remainingCharsElement.textContent = remainingCharacters;
}
productNameInputElement.addEventListener('input', updateRemainingCharacters);
우선, 입력된 텍스트의 값의 길이를 카운팅 한 뒤, 넣을 수 있는 최대 길이에서 현재 값을 빼는 함수를 만들고,
텍스트 창에 입력될 때 마다 숫자를 카운팅 하도록 eventlistener를 사용하자
728x90
반응형