트위터 클론 중 textarea 최대 글자 수 제한 이벤트

작성을 텍스트 위주로 해서 전체 코드를 https://github.com/khsi12345/miniter 에서 확인해주세요~

전체적인 코드와 글을 같이 보면 좋습니다.

1. textarea 요소 dom 객체에 접근하기 위해서 js 파일에서 document.querySelector(’. textBox’)를

let textArea = document.querySelector(".textBox");

2. textarea dom에 접근할 수 있게 됐으니 이벤트를 걸어줄 수 있게 됐다.

textArea.addEventListener("event option", function(e) {});

이벤트가 발생할 때까지 감시하고 있어줄 addEventListener!

이벤트가 발생할때 까지 감시하고 있기는 하는데~~ 어떤 이벤트인지 알아야 하니까 1번째 인자로 이벤트 옵션을 설정해준다.

(이벤트가 발생될 때까지 감시하고 있다가 설정해준 이벤트가 발생하면 감지하고 실행한다.)

이벤트가 발생했을 때 2번째 인자로 주어지는 로직을 실행한다.(비동기)

3.textarea는 입력창이니까 사용자가 키보드를 사용할 거야, 그럼 키보드 관련 이벤트를 걸어줘야겠지?

textArea.addEventListener("keyup", function(e) {});

키보드 옵션이 keyup, keydown, keypress 있는데 keyup을 설정해줬다.

keyup은 키보드를 눌렀다 땠을 때의 이벤트

4. 이제 이벤트가 발생했고, 2번째 인자로 실행될 로직을 만들어보자.

textArea.addEventListener('keyup', function(e) {

// console.log(e)

함수의 인자로 해당 dom 객체에서 발생한 이벤트 객체를 받아 올 수 있다.

if (e.target.value.length <= maxContentsOfTextArea)
  curContents.innerHTML = e.target.value.length;

위 로직은 입력한 글자의 수를 뷰에 표현

if (e.target.value.length >= maxContentsOfTextArea) {
  const contents = e.target.value;

  //이벤트 옵션이 keyup 일 때

  // console.log(contents.slice(0, maxContentsOfTextArea))

  // e.target.value = contents.slice(0, maxContentsOfTextArea);
}

위 로직은 입력한 글자의 수가 최대 글자의 수와 같아져도 textarea에 계속 입력할 수 있다.(최대 글자 수를 오버해서 입력이 되는 문제 발생…)

그래서 입력한 글자의 수가 최대 글자의 수와 같아지거나, 길어질 때 최대 글자 수까지만 view에 표현하기 위한 로직이다.

위 초록색 로직으로 작성한 이유는 keyup 이벤트 때문이다.

(이미 키를 눌렀다 떼서 이벤트가 발생한 시점으로 event.preventDefault()가 먹히지 않는다.)

다르게도 로직을 작성해봤다. (아래 로직)

textArea.addEventListener("keydown", function(e) {
  // console.log(e)

  if (e.target.value.length <= maxContentsOfTextArea)
    curContents.innerHTML = e.target.value.length;

  if (e.target.value.length >= maxContentsOfTextArea) {
    //이벤트 옵션이 keydown 일 때

    if (e.keyCode !== 8) {
      event.preventDefault();
    }
  }
});

keyup 이벤트 옵션을 keydown으로 변경해주었다.

keydown은 키를 누를 때 이벤트가 발생해서 event.preventDefault()가 먹힌다.

하지만 문자를 입력하면 최대 글자 수를 오버해서 계속 입력이 된다…(해결하려고 삽질을 했지만 결국 실패)

또 다른 문제 입력한 문자의 수와 뷰에 표시되는 숫자가 다르다…(이것도 실패)

백스페이스 키가 먹히지 않는다.

그래서 if 조건문으로 백스페이스는 예외 적용을 해주었다.(잘 먹힌다..)