Question

基本上当我在textarea中输入内容时，我可以通过输入id为font_size的输入框中的大小或单击64px按钮来更改字体，一旦字体改变并且我点击完成，我附加了什么的值在textarea中div的图像与id image_conv但这里的问题是它没有将textarea中文本的格式化值带到div，我希望div中的输出是格式化的文本值。有谁知道我怎么能解决这个问题？提前谢谢了。 ps：我在图像小屋上传了文本区域的背景图像，所以每个人都可以使用它，我不知道它是否有效虽然我还没有尝试过：）

 <html>  
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
     function sixty_four() {
        var text_input = $('#textarea');
        text_input.css("font-size", "64px");
       }
     function append_font() {
       var text_input = $('#textarea');
       var font = $('#font_size').val();
        text_input.css("font-size", font + "px");
       }
      function text_manual() { 
      var text_value = $('#textarea').val();
      $('#image_conv').append(text_value);
      $('#image_conv').fadeIn('slow');
      }
    </script>

    <style type="text/css">
    #textarea {
    height:300px;
    width:300px;
    resize: none;
    }

    #image_conv {
        background: url(http://imageshack.us/photo/my-images/97/sliverc.png/) no-repeat left top;
        border: 3px solid #000;
        height:300px;
        width:300px;
    }


    </style>
    </head>

    <body>

    <textarea id="textarea"> </textarea><br/><br/>
    Font size:<input type="text" id="font_size"/><input type="button" id="font_size" value="Append Font" onClick="append_font()"/> 
    <input type="button" id="64px" value="64px" onClick="sixty_four()" /><br/><br/>
    <input type="button" id="manual_text" value="Done" onClick="text_manual()"/> 
    <div id="image_conv" >
    </div>
    </body>
    </html>

Answer 1

textarea中的文本没有格式化，它是textarea元素。

如果要将textarea中的文本显示在与textarea中相同样式的另一个元素中，则必须将相同的样式应用于与textarea相同的元素。

Answer 2

根据我的理解，您希望div中的字体大小与为textarea设置的相同？

难道你不能像这样在你的js中包含img_div：

function sixty_four() {
    var text_input = $('#textarea');
    var img_div = $('#image_conv');
    text_input.css("font-size", "64px");
    img_div.css("font-size", "64px");
}

function append_font() {
    var text_input = $('#textarea');
    var img_div = $('#image_conv');
    var font = $('#font_size').val();
    text_input.css("font-size", font + "px");
    img_div.css("font-size", font + "px");
}

function text_manual() { 
    var text_value = $('#textarea').val();
    $('#image_conv').append(text_value);
    $('#image_conv').fadeIn('slow');
}

我不确定我是否理解你的问题，所以我可能在这里完全错了......

Answer 3

这是你应该怎么做的：

$('#sixty_four').click(function(){
    $('#textarea').css('font-size', '64px');
});
$('#font_size_btn').click(function() {
    $('#textarea').css('font-size', $('#font_size').val() + 'px');
});
$('#manual_text').click(function(){ 
    var $textarea = $('#textarea');
    $('#image_conv')
        .html($textarea.val())
        .css('font-size', $textarea.css('font-size'))
        .fadeIn('slow');
});

Demo

Answer 4

试试这个： http://jsfiddle.net/krdAy/

在jquery中使用.val attr

4 个答案: