In contenteditable div, linebreak ignored when enter key is pressed

Question

When I press the return key to start a new line for the post, the result auto-ignore the return key. I wondered what the most common way of making the output actually starts with a new line whenever the return key pressed?

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>"
?>

Answer 1

Im replying to this because your other question was marked duplicate.

By replacing 2 of your <div> with these,

<form>
        <textarea name="comment_box" id="comment_box"></textarea>
        <input id="post_comment" class="comment_leg" type="submit" value="Post">
</form>

It is able to capture the space by changing your script to capture the textarea with the method .val()

var txt = $("textarea#comment_box").val();
    if(txt){
        $.post("commenttest.php", {txt: txt}, function(result){
            $("div[name=commentsubmit]").prepend(result);
            $("textarea#comment_box").val();
        });
    }

To have it printed with the line break, in your commenttest.php, insert this before you echo, which is what you have tried but didnt work from your duplicate post or recommended from an answer.

$comment = nl2br($comment);

Answer 2

No. The <br /> is not at all present there. There's \\r\\n . So you need to use:

$comment = nl2br($comment);

To convert all the new lines to break in your PHP code.