我使用此代码创建一个“假文本区域”(内容可编辑div)和一些jQuery东西来伪造占位符并将文本传递给真正的textarea:

/*If used as update clear placeholders*/
$( window ).on("load", function(){
    $( document ).find('.feditInput').each( function(){
        if ($(this).html().length > 1) {
            $(this).parent().find(".jqtholder").css("opacity","0");
        }
    }
)});
/*Now the main thing*/
$('.feditInput').on('change keydown keyup',function(){
    if (event.which != '9') {
        $('#'+$(this).attr('foreal')).text($(this).text()) ;
        if ($(this).html() == '' && event.which == '8') {
            $(this).parent().find(".jqtholder").css("opacity","1");
        }
       else {
           $(this).parent().find(".jqtholder").css("opacity","0");
       }
   }
});
.faketextarea
{
    position:relative;
    border: 1px solid #aaa;
    width: 20%;
    padding: 3px 2px;
}
.jqtholder
{
    position:absolute;
    color:gray;
    top:0;
    left:0;
    padding: inherit;
    z-index:-1;
}

.feditInput
{
    width:100%;
    outline:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faketextarea">
    <div class="jqtholder">Subject</div>
    <div class="feditInput" foreal="1" contenteditable></div>
</div>
<div class="faketextarea"> <div class="jqtholder">Massege</div> <div class="feditInput" foreal="2" contenteditable></div> </div> <textarea id="1"></textarea> <textarea id="2"></textarea>

My Problem is: 当你在伪文本区域中使用断行时,它们不会作为断行传递到真正的textarea中 .

例如,如果你输入:“嗨,我是约翰和
我喜欢编码......“
你会得到:"hi i'm john andi love coding..."

我尝试使用.text / .html / .val的不同组合播放但没有成功 .

如果我改变了这个:

$('#'+$(this).attr('foreal')).val($(this).html()) ;

对此:

$('#'+$(this).attr('foreal')).val($(this).html().replace("<div>","").replace("</div>","\n").replace("<br>","\n")) ;

它对断线很有用,但是后面加了 &nbsp; ......

This answer由于某种原因在这种情况下不起作用 . 也许有人可以找出原因......