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

我正在为我的网站创建Facebook式聊天。但我被困在jquery中。我在聊天箱中输入的文本未显示在div中。用户从联机列表中选择用户后，会显示聊天框。而且我还希望代码能够发送和接收来自用户的聊天。如何在文本框中将聊天消息显示为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

来源

2016-05-15 Extreme Dimension

执行警报火？并考虑使用jquerys'.text'方法，这将帮助您解决当前的xss漏洞。 –

没有警报不起作用。 –

@ExtremeDimension你在哪里试图展示你的消息？在div类中与''gg_push''类？ –

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

$('textarea#msgTXT')

，你可以使用

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

Demo

来源

2016-05-15 08:14:44

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

回答

相关问题