Question

我使用此代码创建一个“假文本区域”（内容可编辑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><br/>
<div class="faketextarea">
    <div class="jqtholder">Massege</div>
    <div class="feditInput" foreal="2" contenteditable></div>
</div>
<textarea id="1"></textarea>
<textarea id="2"></textarea>

我的问题是： 当你在伪文本区域中使用断行时，它们不会作为断行线传入真正的textarea。

例如，如果您键入： “嗨，我是约翰和我喜欢编码......“ 你会得到： “嗨，我是john andi喜欢编码...”

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

如果我改变了这个：

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

对此：

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

它适用于断行，但随后为空格添加 

出于某种原因，

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

使用jQuery将带有断行的文本传递给textarea

0 个答案: