javascript - 预览 div 无法在第二行显示 'text'

Question

在我的评论框中，我希望用户评论带有表情并显示出来。但是textarea只能支持纯文本，所以我在提交前添加了一个评论预览的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 {
	border: 2px solid #ccc;
	padding:0px;
	overflow:auto;
	width: 450px;
	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>

我的问题

当我按回车进入第二行并写入任何“文本”时，预览 div 无法在第二行显示“文本”，它在同一行显示“文本”。

Answer 1

可以试试这个。首先添加 <br>然后休息:

 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() {
			   $(".chat > textarea").bind("keyup", function(e) {
			     $(".chat > div").html(smilyMe($(".chat > textarea").val()));
			   });
			 });

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

 div#maintbox {
	border: 2px solid #ccc;
	padding:0px;
	overflow:auto;
	width: 450px;
	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>