글자를 입력할 때마다 오른쪽의 숫자가 그만큼 줄어드는 입력창을 만들어보자
출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프
탐지해야 할 이벤트는 키 입력이다. addEventListene의 첫 번째 파라미터 값으로는 ‘input’을 넣어준다. keyup 등의 이벤트도 있는데 input을 사용하면 입력창에 드래그 앤 드롭이나 복붙 등의 이벤트도 탐지할 수 있다.
let userInput = document.querySelector('input');
function retrieveInput(){
let text = userInput.value;
}
userInput.addEventListener('input', retrieveInput)HTML의 input태그에서 값을 가져오려면 value속성을 사용한다.
이제 유저가 입력창에 텍스트를 입력할 때마다 그 내용을 뽑아올 수 있게 되었다.
<body>
<form action="">
<div class="control">
<label for="product-name">Product Name</label>
<input type="text" id="product-name" name="product-name" maxlength="60"/>
<span id="charcount">
<span id="remaining-chars">60</span>/60
</span>
</div>
<button>submit</button>
</form>
</body>이제 HTML구조를 만들어 준다(스타일링을 위한 CSS코드는 생략)
여기서 span의 /60이라는 텍스트는 span을 벗어나 있는데, 그 이유는 최대 글자 수는 바뀌지 않고, 자바스크립트에서 조절할 부분은 글자수가 입력되는 span태그 안쪽의 60이기 때문이다.
이제 자바스크립트 코드를 작성하면
let input = document.getElementById('product-name');
let charsInput = document.getElementById('remaining-chars');
let maxChars = input.maxLength;
function update(events){
let text = events.target.value;
let textLength = text.length;
let remainingChar = maxChars - textLength;
charsInput.textContent = remainingChar;
}
input.addEventListener('input', update);업데이트 하는 부분은 span의 60이었으므로
let charsInput = document.getElementById('remaining-chars');으로 span을 선택한 후
let text = events.target.value;
let textLength = text.length;에서 텍스트의 길이를 구하고 span을 업데이트 하는 코드이다.
이제 글자를 입력한 만큼 숫자가 줄어드는 것을 볼 수 있다.
공부 정리용 블로그