textarea,使用返回键进行换行不起作用[重复]

This question already has an answer here:

When I press the return key to start a new line for the post, the result auto-ignore it. For example, I press the key 'a' key 'return' key 'b' , it prints out 'ab'. but I need 'a
b' I wondered how to fix it?

I tried $comment = nl2br($comment), which is not working.

Below is a demo I just made for testing.

php file (linebreak.php)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="comment_box" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="How do you feel about?"></div>
<div id="post_comment" class="comment_leg">Post</div>
<div name="commentsubmit"></div> 
<style>
#comment_box{
    text-align: center;
  background-color: white;

  /*position:relative;*/
  border: 1px solid orange;
  /*height:60px;*/
  width: 500px;
  padding: 10px;
  color:black;
  border-radius:3px;
  /*font-size:18px;*/
  display: inline-block;
  text-align: left;
  vertical-align: bottom;

  /*border-color:yellow;*/
}
.comment_leg{
cursor:pointer;
width:60px;
/*height:18px;*/
background-color: #ffcc99;
padding:5px;
text-align: center;
border-radius: 3px;
display:hide;
 vertical-align: bottom;
  display: inline-block;
}
</style>


<script>
$(function(){
        $("#post_comment").click(function(){
            var txt = $("#comment_box").text();
            if(txt){
                    $.post("commenttest.php", {txt: txt}, function(result){
                        $("div[name=commentsubmit]").prepend(result);
                        $("#comment_box").text('');
                    });
             }

        })
})

</script>

php file(commenttest.php)

<?php
$comment=$_POST["txt"];
echo "<div style='color:orange'>".$comment."</div>"
?>
</div>

You should make the div either an input or textarea