미리보기 div는 두 번째 줄에 '텍스트'를 표시 할 수 없습니다.

내 댓글 상자에 사용자의 이모티콘 댓글 및 표시가 필요합니다. 하지만 textarea는 일반 텍스트 만 지원할 수 있으므로 제출 전에 미리보기 미리보기가있는 곳에 div를 추가합니다. 나는 2 선을 이동하고 '텍스트'를 작성하는 Enter 키를 누르면미리보기 div는 두 번째 줄에 '텍스트'를 표시 할 수 없습니다.

var smileys = { 
 
    ':)': '<img src="smilies/smile.gif" border="0" alt="" />', 
 
    ':-)': '<img src="smilies/smile.gif" border="0" alt="" />' 
 
}; 
 

 
$(document).ready(function() { 
 
    $(".chat > textarea").bind("keyup", function(e) { 
 
    $(".chat > div").html(smilyMe($(".chat > textarea").val())); 
 
    }); 
 
}); 
 

 
function smilyMe(msg) { 
 
    //smiley replace 
 
    return msg.replace(/(\:\)|\:-\)|\:D|\:-D|\blol\b|\:-\||\:-\(|\;-\))/g, function(all) { 
 
    return smileys[all] || all; 
 
    }); 
 
}

div#maintbox { 
 
\t border: 2px solid #ccc; 
 
\t padding:0px; 
 
\t overflow:auto; 
 
\t width: 450px; 
 
\t margin-bottom:3px; 
 

 
} 
 
div.chat { 
 
    width: 400px; 
 
} 
 
div.chat > div { 
 
    width: 400px; 
 
    color:#000000; 
 
    padding: 0px 0px 5px 0px; 
 
    z-index:997; 
 
} 
 

 
div.chat > textarea { 
 
    width: 400px; 
 
    background: transparent; 
 
}

<div id="maintbox"> 
 
<div class="chat"> 
 
    <div> 
 
    </div> 
 
    <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea> 
 
</div> 
 
    <div align="right" style="width:30px;float:right;"><img src="images/camera.png" width="25" alt="Upload image" id="uploadMedia" style="padding:2px;cursor:pointer;" /></div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

내 질문

, 미리보기 사업부는 표시 할 수 없습니다 '내 일에 여기

텍스트 '와 같은 줄에'텍스트 '가 표시됩니다.

출처

2015-01-27 koc

의 줄 바꿈은'DIV의'
'요소로 대체 될 필요가'textarea' '. – melancia

죄송합니다. 수정하고 내 질문을 업데이트하십시오. – koc

[문자열의 모든 줄 바꿈을
태그로 바꾸려면 어떻게합니까?] (http://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a) -string-with-br-tags) – melancia

는 할 <br>를 추가 this.first 나머지를 시도 할 수있다 :

var smileys = { 
 
    ':)': '<img src="http://labs.google.com/ridefinder/images/mm_20_red.png" border="0" alt="" />', 
 
    ':-)': '<img src="http://labs.google.com/ridefinder/images/mm_20_green.png" border="0" alt="" />' 
 
};//images here are for demo add your images for use. 
 

 
$(document).ready(function() { 
 
\t \t \t $(".chat > textarea").bind("keyup", function(e) { 
 
\t \t \t  $(".chat > div").html(smilyMe($(".chat > textarea").val())); 
 
\t \t \t }); 
 
\t \t \t }); 
 

 
function smilyMe(msg) { 
 
\t msg=msg.replace(/(?:\r\n|\r|\n)/g, '<br />'); 
 
\t return msg.replace(/(\:\)|\:-\)|\:D|\:-D|\blol\b|\:-\||\:-\(|\;-\))/g, function(all) { 
 
\t \t  str= smileys[all] || all; 
 
\t \t  return str; 
 
\t \t  
 
\t \t }); 
 
\t }

div#maintbox { 
 
\t border: 2px solid #ccc; 
 
\t padding:0px; 
 
\t overflow:auto; 
 
\t width: 450px; 
 
\t margin-bottom:3px; 
 

 
} 
 
div.chat { 
 
    width: 400px; 
 
} 
 
div.chat > div { 
 
    width: 400px; 
 
    color:#000000; 
 
    padding: 0px 0px 5px 0px; 
 
    z-index:997; 
 
} 
 

 
div.chat > textarea { 
 
    width: 400px; 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="maintbox"> 
 
<div class="chat"> 
 
    <div> 
 
    </div> 
 
    <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea> 
 
</div> 
 
    <div align="right" style="width:30px;float:right;"><img src="images/camera.png" width="25" alt="Upload image" id="uploadMedia" style="padding:2px;cursor:pointer;" /></div> 
 
</div>

출처

2015-01-27 17:07:31

미리보기 div는 두 번째 줄에 '텍스트'를 표시 할 수 없습니다.

답변

관련 문제