textarea에서 엔터키 눌렀을 때 이벤트 동작하기

챗봇형식을 어설프게 따라한 것인데 보통 채팅할 때 버튼이 있어도 엔터키를 눌러서 전송시키는 동작이 일반적이다.

물론 줄바꿈이 반드시 필요한 경우에는 맞진 않겠지만 그 경우를 빼고 생각하였다.

textarea#chatBot(class='form-control' style='resize:none; width:340px; height:300px;' name='chatBot' readonly='readonly') bot : 안녕 내가 도와줄게!
p
textarea#chatUser(class='form-control' style='resize:none; width:340px; height:50;' name='chatUser')
p
input#chatPost(type='button' value='보내기' class='chatsend')

(textarea의 class 부분은 꼭 써주지 않아도 된다. css적인 요소를 약간 넣은 것이다.) 위는 pug 템플릿으로 쓰인 구문이고

https://pughtml.com/ 

위 사이트에서 pug <-> html 간의 변환이 가능하다.

일단 신경써야하는 부분은 엔터키를 눌렀을 때 버튼이 클릭된 것과 동일한 이벤트를 발생시키는 것이다.

[자바스크립트 부분]

script.
    document.getElementById('chatUser').addEventListener('keydown',function(event){
        if(event.keyCode ==13){
        event.preventDefault();
            document.getElementById('chatPost').click();
        }
    });
    document.querySelector('.chatsend').addEventListener('click',function(){
        document.getElementById('chatBot').value += '\n나 : '+document.getElementById('chatUser').value;
    });

보면 사용자가 입력하는 textarea부분에서 keydown 이벤트가 발생했을 때, 그리고 그 key가 13번 (enter키) 일 때 

바로 아래있는 querySelector을 통해 처음에 만들어주었던 button이 클릭되는 이벤트를 실행시키는 과정이다.

채팅창의 내용이 지워지면 안되므로 기존 채팅창에서 더하기를 하여 기존 채팅내용도 없어지지 않고 새로 작성하는 채팅내용도 

줄바꿈의 형태로 들어가는 코드이다. 

맨 위에 짤방처럼 챗봇이 응답하는 형태로 하려면 버튼 click 이벤트에다가 추가적으로 ajax통신 function을 추가적으로 작성해주면 

사용자의 채팅에 응답할 수 있는 형태로 만들 수 있다.