HTML界面監控鍵盤回車Enter按下並綁定動作

本示例綁定鍵盤回車鍵（Enter），觸發發送WebSocket消息動作

 

<script type="text/javascript">
        //監控鍵盤Enter 回車鍵按下的動作
        document.onkeydown = function(e){ if((e||event).keyCode==13) sendMsg(); }; ///////////////ws創建&監控接收消息處理動作/////////////////////////

        //創建ws協議連接，創建出來后就已經和服務端建立連接
        var ws = new WebSocket("ws://127.0.0.1/chat?username={{current_user}}");
        /////////////////////收到WebSocket消息//////////////////////////
        ws.onmessage = function(recv) {
            // $("#contents").append("<p>" + recv.data + "</p>"); //jquery 向div中添加內容

            var div = document.getElementById('contents');
            div.innerHTML = div.innerHTML  +  recv.data + '<br>';
            div.scrollTop = div.scrollHeight; //當前div的滾輪始終保持最下面

        };
        ////////////////////發送WebSocket消息////////////////////////
        function sendMsg() {
            $('#msg').val($('#msg').val().trim());//去除輸入前后的空格
            var msg = $("#msg").val();
            if ( msg && msg.length >0) {
                data = {
                    // username:username,
                    msg:msg
                };
                ws.send(JSON.stringify(data));
                $("#msg").val("");
            }else {
                console.log('內容不許為空')
            }
        }
    </script>