YJ의 새벽

Java Script ( 채팅창구현 ) 본문

WebFront_/Java Script

Java Script ( 채팅창구현 )

YJDawn 2023. 2. 23. 20:52

 

 

--onkeydown  :  키가 눌러졌을때.

--onkeypress  :  키가 눌러지고있을때.

--onkeyup       :  키가 다시 올라올때.

--   scrollTop = 스크롤위치   : 스크롤위치로 이동한다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #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>
</head>
<body>
    <h3>카카오톡 채팅화면 만들기</h3>

    <div id="chatting-bg">
        <p><span>입력되는 채팅출력</span></p>
        <p><span>입력되는 채팅출력</span></p>
        <p><span>입력되는 채팅출력</span></p>
    </div>
    <input type="text" size="50" id="chattingInput" onkeyup="inputEnter()">
    <button onclick="readValue()">입력</button>


             <!-- script 구간 ------------->
    <script>
        function readValue(){                // 입력된값을 읽어서 채팅창에출력

        //채팅과 관련된 요소 모두얻어오기
        const bg = document.getElementById("chatting-bg");
        const input = document.querySelector("#chattingInput");

        if( input.value.trim().length > 0){        //채팅이 정상입력에만 출력

            bg.innerHTML += "<p><span>"+input.value+"</span></p>"; //채팅창 입력값으로 채팅추가
            
            bg.scrollTop=bg.scrollHeight;             // 스크롤을 제일 하단으로
        }
        input.value="";
        }
        
        function inputEnter(){
        if( window.event.key=="Enter"){
            readValue();
        }
     }

    </script>
</body>
</html>

 

 

Document

카카오톡 채팅화면 만들기

입력되는 채팅출력

입력되는 채팅출력

입력되는 채팅출력

'WebFront_ > Java Script' 카테고리의 다른 글

Java Script ( 이벤트 )  (0) 2023.02.24
Java Script ( 간이계산기 )  (0) 2023.02.24
Java Script ( 변수 )  (0) 2023.02.24
Java Script ( DOM , 요소접근방법 )  (0) 2023.02.23
Java Script 방식  (0) 2023.02.23
'WebFront_/Java Script' Related Articles more
Comments