jquery中的预览框


preview box in jquery

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

<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个字符后的下一行的文本。任何人请帮助我解决这个问题。

试试这个

它会在下一行中生成您的行并给出一些空间;

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

小提琴演示