[JQuery] 채팅 박스 만들기

디지털 컨버전스/Java Script

[JQuery] 채팅 박스 만들기

gimyeondong 2020. 4. 20. 16:35

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>

    </head>
    <style>

        .wrapper{
            border: 1px solid black;
            width: 250px;
            height: 250px;

        }

        input{

            height: 100%;
        }
        #topbox{
            width:100%;
            height:80%;
            overflow-y:auto;
            word-wrap: break-word;
            word-break: break-all;
        }
        #box{
            width: 100%;
        }

    </style>
    <script>

        function updateScroll(){
            var element = document.getElementById("topbox");
            element.scrollTop=element.scrollHeight;
        }

        $(function(){


            $("#send").on("click",function(){

                var msg = $("#input").val();

                var tr = $("<tr></tr");
                tr.append("<td>"+msg);
                $("#box").append(tr);
                $("#input").val("");

                //var maxScroll = $("#box").height() - $("#topbox").height();
                //$("#topbox").scrollTop(maxScroll);
                updateScroll();
            })

            $("#input").on("keyup",function(e){
                if(e.keyCode == 13){
                    var msg = $("#input").val();
                    var tr = $("<tr></tr");
                    tr.append("<td>"+msg);
                    $("#box").append(tr);
                    $("#input").val("");

                    updateScroll();
                }
            })



        })
    </script>
    <body>
        <div class="wrapper">
            <div id=topbox>

                <table id="box"></table>

            </div>

            <div id="bottombox">
                <input type="text" id="input">
                <input type="button" value="send" id="send">
            </div>
        </div>

    </body>
</html>

세로는 스크롤, 가로는 줄바꿈

        #topbox{
            width:100%;
            height:80%;
            overflow-y:auto;
            word-wrap: break-word;
            word-break: break-all;
        }

채팅창 스크롤 변경

                //var maxScroll = $("#box").height() - $("#topbox").height();
                //$("#topbox").scrollTop(maxScroll);

출처 : https://smujihoon.tistory.com/134

        function updateScroll(){
            var element = document.getElementById("topbox");
            element.scrollTop=element.scrollHeight;
        }

엔터 입력

키코드 13 == enter

            $("#input").on("keyup",function(e){
                if(e.keyCode == 13){
                    var msg = $("#input").val();
                    var tr = $("<tr></tr");
                    tr.append("<td>"+msg);
                    $("#box").append(tr);
                    $("#input").val("");

                    updateScroll();
                }
            })

강사님 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
        <style>
            *{box-sizing: border-box;}
            div{border:1px solid black;}
            .container{width:300px;height:300px;margin:auto;}
            .chat{width:100%;height:80%;overflow-y:auto;word-wrap: break-word; word-break: break-all;}
            .input{width:100%;height:20%;}
            .msg_div{float:left;width:80%;height:100%;}
            #msg{width:100%;height:100%;}
            .send_div{float:left;width:20%;height:100%;}
            #send{width:100%;height:100%;}
        </style>
        <script>

            function updateScroll(){
                var element = document.getElementById("chat");
                element.scrollTop = element.scrollHeight;
            }

            $(function(){
                $("#send").on("click",function(){
                    var msg = $("#msg").val();
                    var line = $("<div></div>");
                    line.append(msg);

                    $(".chat").append(line);
                    $("#msg").val("");
                    updateScroll();
                })

                $("#msg").on("keyup",function(e){
                    if(e.keyCode == 13){
                        var msg = $("#msg").val();
                        var line = $("<div></div>");
                        line.append(msg);

                        $(".chat").append(line);
                        $("#msg").val("");
                        updateScroll();
                    }
                })
            })
        </script>
    </head>
    <body>
        <div class="container">
            <div class="chat" id="chat">

            </div>
            <div class="input">
                <div class="msg_div">
                    <input type=text id=msg>
                </div>
                <div class="send_div">
                    <input type=button id=send value="send">
                </div>
            </div>
        </div>
    </body>
</html>

cf. 클래스네임으로 가져오면 배열, [0]로 선택