javascript - jquery中的预览框

Question

我有一个文本区域和一个预览框。当我输入 textarea 时，它将显示在预览框中。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript"> 
function updateAdTextdValue()
{ 

var s = document.getElementById("sample_ad_text").value;

if( s=='Write here ...')
{
    s ="";
}


jQuery("#composeadd_display").html(s);
}

</script>


<textarea onchange="updateAdTextdValue()"  class="textarea" id="sample_ad_text" name="sample_ad_text" onblur="if (this.value == '') {this.value = 'Write here ...';this.style.color='#252525';}" onfocus="if(this.value == 'Write here ...') {this.value = '';this.style.color='#252525'}" style="width:250px; height:250px;">Write here ...</textarea>


<div class="composeadd_b" id="composeadd_display" style="overflow-y:auto; background-color: #F5F5F5;
float: left;
font-size: 13px;
height: 350px;
margin-right: 35px;
padding: 10px;
width: 285px;"> </div>

这是工作 。但我想在 20 个字符后在预览框中显示文本到下一行。任何人都请帮我解决这个问题。

Answer 1

尝试这个

它会在下一行生成你的行并留出一些空间；

    <script type="text/javascript"> 
    function updateAdTextdValue()
{ 

var s   = document.getElementById("sample_ad_text").value;
var output='';

if( s=='Write here ...')
{
    s ="";
}
else 
{
         for(var i in s)
        {
            if(i > 0 && i%20 == 0)
                output += '<br>';
                output += s[i];
        }
    jQuery("#composeadd_display").html(output);
}    



}
    </script>

小提琴演示