체크 리스트

1. 글자수 300자 제한
2. 글자수가 300보다 크거나 같을 때 빨간색으로 변경, textarea 제한
3. Backspace를 눌렀을 경우 생각

첫 번째 구현 방법 (onkeydown)

textarea에 onkeydown 이벤트 사용

• HTML

<textarea name="study_content" rows="20" cols="40"
				  placeholder="스터디 목표와 진행 방식을 자세히 설명해주세요 / 진행방식 / 커리큘럼 / 준비물 (최대 500자)"
					onkeydown="studyContentCheck(event)"
				  maxlength="300"
				  required>
</textarea>

• JavaScript

	// 스터디 내용 글자수 제한 유효성 검사 
	var count=0;
	function studyContentCheck(event){
		
		var remit = document.querySelector('#keynum');
		
		if(event.key == 'Backspace'){
			count--;
			if(count<=0){
				count=0;
			}
			if(count!=300){
				remit.style.color = 'black';
			}
		}else {
			count++;
			if(count>=300){;
				remit.style.color = 'red';
				count=300;
			}
		}
		var changeNum = document.getElementById('keynum');
		changeNum.innerHTML = count;
		
	}

첫 번째 구현 방법에서 문제 인지

• onkeydown 이벤트를 줘서 키보드를 누르자 마자 이벤트가 발생함
• Backsapce도 이벤트로 인지 되어서 숫자가 증가하는 문제 발생함
• esc나 방향키 등 textarea에 들어가지 않는 키를 눌렀을 때도 이벤트가 발생하여 숫자가 증가하는 문제가 발생함
• 영어나 숫자는 상관 없는데 한글을 입력할 때 숫자가 2씩 증가하는 문제가 발생함
• 한글 입력 후커서가 맨 끝에 있을 때 ←왼쪽 방향키 누르면 마지막 글자가 지워지는 문제가 발생함

해결 방안 (onkeyup)

• onkeydown → onkeyup 변경