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 here

Answer 1

选择器中的问题应该是

$('textarea#msgTXT')

你可以使用

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

Demo

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

1 个答案: