(11)인터렉티브_자바스크립트_키보드 관련 event

● 키보드 관련 event.프로퍼티 값 (2가지)

○ event.key : 키보드를 누른 후 출력되는 값

○ event.code : 키보드를 눌렀을 때, 키보드 상 누른 위치 :

● 키보드 관련 event.type (3가지)

○ 키보드를 눌렀을 때, 발생 type => ''keydown" , "keypress"

• "keydown" : 기능적인 key(ESC , Tab) 등 과 출력 관련 키 모두 발생 , 연타 눌렀을 떄도 발생
• "keypress" : 연타 눌렀을 때, 발생X , ESC 눌렀을 때, 발생X , 영어가 아닌 문자 입력 시, //어지간하면, 사용 X

○ 키보드를 누른 후의 떼었을 때, 발생 type => "keyup"

 

● 연습문제 :

코드잇 우등생 규리는 최근에 공부한 HTML/CSS, 그리고 자바스크립트를 활용해서 웹으로 간단한 채팅 앱을 만들었습니다. textarea 태그에 메시지를 입력하고 오른편에 있는 send 버튼을 클릭하면 화면에 입력한 메시지가 나오죠.

규리가 만든 것처럼 text 타입의 input 태그나 textarea 태그를 자바스크립트로 선택한 다음에 해당 요소 노드의 value 프로퍼티를 활용하면 해당 태그에 입력된 값을 다룰 수 있습니다.

그런데 한 가지 아쉬운 점은 키보드로 메시지를 입력하고 나면, 마우스를 움직여서 send 버튼을 눌러야 한다는 겁니다.

아쉬운 규리를 위해서 textarea 태그에서 enter 키를 누르면 sendMyText 함수가 호출되는 코드를 추가해 주세요.

코드를 완성했을 때 아래 조건들이 지켜져야 합니다.

• enter 키로 메시지를 전송하고 나면 textarea 태그는 초기화가 제대로 되어야 합니다.
• shift+enter 일때는 줄바꿈이 일어나야 합니다.
• keypress 타입으로 이벤트 핸들러가 등록되어야 합니다.

참고 사항

하나의 버튼에 하나의 값이 입력되는 영어와는 다르게, 한국어의 자음과 모음의 결합처럼 여러 버튼을 눌러서 하나의 입력 값을 만들 수 있는 언어들은 입력할 때 자세히 살펴보면, 화면에 입력중인 문자 바로 아래에 작은 밑줄이 나타나는 경우를 볼 수 있습니다.

만약 keyup, keydown 타입으로 이벤트 핸들러를 등록하고, 그 밑줄이 보이는 상황에서 enter나 esc, 혹은 방향키와 같은 키보드 버튼을 누를 경우 해당 버튼에 대한 이벤트가 2번 중복해서 반응하는 이슈가 있습니다.

왜냐하면 글자가 조합 중인지, 조합이 완료된 것인지 쉽게 파악하기 어렵기 때문인데요. 그래서 이렇게 특별한 상황에 따라서는 keypress가 필요할 수도 있다는 점. 참고해 두시면 좋을 것 같습니다!

 

채팅메신저만들기.zip

0.26MB

const chatBox = document.querySelector('#chat-box');
const input = document.querySelector('#input');
const send = document.querySelector('#send');

function sendMyText() {
  const newMessage = input.value;
  if (newMessage) {
    const div = document.createElement('div');
    div.classList.add('bubble', 'my-bubble');
    div.innerText = newMessage;
    chatBox.append(div);
  } else {
    alert('메시지를 입력하세요...');
  }

  input.value = '';
}

send.addEventListener('click', sendMyText);
// 여기에 코드를 작성하세요

function sendMyTextEnter(event){
  if(event.key==='Enter')
  {
    event.preventDefault();
    sendMyText();
  }
}

input.addEventListener('keypress',sendMyTextEnter);