如何在div的文本框中显示聊天消息

Question

我正在为我的网站创建一个facebook风格的聊天。但我被jquery卡住了。我在聊天框中输入的文本不会显示在div中。聊天框是在用户从在线列表中选择用户后显示的。我还想让代码发送和接收来自用户的聊天。

JQuery代码：

$(document).ready(function (){
    $("#msgTXT textarea").keypress(
        function(e){
            alert(e.keyCode);
            if (e.keyCode == 13) {
                alert("Thats a Press");
                var msg = $(this).val();
                $(this).val('');
                if(msg!='')
                    $('<div class="msg_b">'+msg+'test</div>').insertAfter('.msg_push');
                $('.popup-messages').scrollTop($('.popup-messages')[0].scrollHeight);
            }
        });
});

JS代码：

//this function can remove a array element.
 Array.remove = function(array, from, to) {
     var rest = array.slice((to || from) + 1 || array.length);
     array.length = from < 0 ? array.length + from : from;
     return array.push.apply(array, rest);
 };
 //this variable represents the total number of popups can be displayed according to the viewport width
 var total_popups = 0;
 //arrays of popups ids
 var popups = [];
 //this is used to close a popup
 function close_popup(id)
 {
     for(var iii = 0; iii < popups.length; iii++)
     {
         if(id == popups[iii])
         {
             Array.remove(popups, iii);
             document.getElementById(id).style.display = "none";
             calculate_popups();
             return;
         }
     }
 }
 //displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
 function display_popups()
 {
     var right = 220;
     var iii = 0;
     for(iii; iii < total_popups; iii++)
     {
         if(popups[iii] != undefined)
         {
             var element = document.getElementById(popups[iii]);
             element.style.right = right + "px";
             right = right + 320;
             element.style.display = "block";
         }
     }
     for(var jjj = iii; jjj < popups.length; jjj++)
     {
         var element = document.getElementById(popups[jjj]);
         element.style.display = "none";
     }
 }
 //creates markup for a new popup. Adds the id to popups array.
 function register_popup(id, name)
 {
     for(var iii = 0; iii < popups.length; iii++)
     {
         //already registered. Bring it to front.
         if(id == popups[iii])
         {
             Array.remove(popups, iii);
             popups.unshift(id);
             calculate_popups();

             return;
         }
     }
     var element = '<div class="popup-box chat-popup" id="'+ id +'">';
     element = element + '<div class="popup-head">';
     element = element + '<div class="popup-head-left">'+ name +'</div>';
     element = element + '<div class="popup-head-right"><a href="javascript:close_popup(''+ id +'');">&#10005;</a></div>';
     element = element + '<div style="clear: both"></div></div><div class="popup-messages">'
     element = element + '<div class="msg_push"></div><textarea id="msgTXT" style="width: 281px; height: 67px; margin-top:185px; position:fixed; resize: none;"></textarea></div></div>';
     document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
     popups.unshift(id);
     calculate_popups();
 }
 //calculate the total number of popups suitable and then populate the toatal_popups variable.
 function calculate_popups()
 {
     var width = window.innerWidth;
     if(width < 540)
     {
         total_popups = 0;
     }
     else
     {
         width = width - 200;
         //320 is width of a single popup box
         total_popups = parseInt(width/320);
     }
     display_popups();
 }
 //recalculate when window is loaded and also when window is resized.
 window.addEventListener("resize", calculate_popups);
 window.addEventListener("load", calculate_popups);

这是我项目的一部分：ChatDemo

完整的项目位于我的GitRepo这里

Answer 1

选择器中的问题您的选择器应该是

$('textarea#msgTXT')

你可以使用

$(document).on('keypress', "textarea#msgTXT" , function(){});

演示