2016-05-15 5 views
2

私のウェブサイトのために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); 

これは私のprojの一部です:ChatDemo

完全なプロジェクトは、私のGitRepo here

に位置しています
+0

を使用することができますか? jquerys '.text'メソッドを使用することを検討してください。これは現在のxssの脆弱性に役立ちます。 –

+0

アラートは機能しません。 –

+0

@ExtremeDimensionどこにメッセージを表示しようとしていますか? divの中でクラス'msg_push' ?? –

答えて

0

セレクターセレクターの問題

$('textarea#msgTXT') 

でなければなりません、あなたは警告射撃を行います

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

Demo

関連する問題