在contenteditable div中，按Enter键时忽略换行 [英] In contenteditable div, linebreak ignored when enter key is pressed

问题描述

当我按下返回键为帖子开始一个新行时，结果会自动忽略返回键。我想知道什么最常见的方式使输出实际上开始一个新行每当返回键按下？

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文件（linebreak.php）

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档案（commenttest.php）

php file(commenttest.php)

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

推荐答案

由于您的其他问题被标记为重复。

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

通过用< div> 替换2，

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

通过更改脚本来捕获textarea，可以捕获空间。 ）

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();
        });
    }

要打印换行符，请在commenttest.php中插入

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);

这篇关于在contenteditable div中，按Enter键时忽略换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！