카카오톡 채팅 화면 만들기 (23.06.20)

✏️ html

    <style>
        .area{
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }

        /* 카카오톡 채팅 만들기 */
        #chatting-bg{
            width: 360px;
            height: 400px;
            border: 1px solid black;
            background-color: rgb(178, 199, 217);
            overflow: auto;
        }

        /* 채팅 내용 */
        #chatting-bg > p > span{
            background-color: rgb(254, 234, 51);
            padding: 5px;
            border-radius: 5px;
        }

        /* 채팅 출력 라인 */
        #chatting-bg > p{
            margin: 20px 10px;
            text-align: right;
        }
    </style>
.
.
.
    <h3>카카오톡 채팅 화면 만들기</h3>

    <div id="chatting-bg">
        <p> <span> 추가 입력</span></p>

        <p> <span> 입력되는 채팅 출력</span></p>

        <p> <span> 입력되는 채팅 출력</span></p>
    </div>

    <!-- onkeydown : 키가 눌러졌을 때 -->
    <!-- onkeypress : 키가 눌려지고 있을 때 -->
    <!-- 쭉 누르고 있을 경우 무분별한 함수 호출이 발생 -->

    <!-- onkeyup : 키가 올라올 때 -->
    <input type="text" id="chatting-input" size="50" onkeyup="inputEnter(event)">

    <button onclick="readValue()">입력</button>

✏️ js

// 카카오톡 채팅 만들기
function readValue(){
    
    // 채팅 입력에 사용되는 요소 모두 얻어오기
    const bg = document.getElementById("chatting-bg");

    const input = document.querySelector("#chatting-input");

    // input에 입력된 값이 있을 경우
    if(input.value.trim().length > 0){

        // 문자열.trim() : 문자열 양 끝에 공백을 모두 제거
        // ex) "           k        h            ".trim() -> "k        h"

        // input에 입력된 값을 얻어와 bg에 추가(누적)
        bg.innerHTML += "<p> <span>" + input.value + "</span></p>";

        // 요소.scrollTop        : 요소 내부 현재 스크롤 위치 반환
        // 요소.scrollTop = 위치 : 스크롤을 특정 위치 이동
        // 요소.scrollHeight     : 스크롤 전체 높이

        // bg의 스크롤을 제일 밑으로 내리기
        bg.scrollTop = bg.scrollHeight;
    }

    // input에 작성된 값 변경하기
    input.value = ""; // 빈 문자열 == value 지우기

    // input에 초점 맞추기 -> focus()
    input.focus();
}

// input 태그 키가 눌러졌을 때 엔터인 경우를 검사하는 함수
function inputEnter(event){
    
    // console.log(event.key); // 현재 눌러진 키를 반환

    if(event.key == "Enter"){ // 눌러진 key가 Enter인 경우
        readValue(); // 함수 호출
    }
}

✏️ 출력 화면

-> 엔터를 누를 때마다 채팅이 입력되는 모습을 볼 수 있다!