-1

我正在向弯曲的形状文本添加字体样式，例如（小写字母、全大写字母、无大写字母和正常），但在这些样式中，只有小写字母、全大写字母和无大写字母有效，但正常情况下它不起作用。为什么？

普通文本应该看起来像“普通”，意味着第一个字母应该是大写字母，剩余的应该很小。请尽快给我答案。有没有人回答我的问题。

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form>
Top Center:<input type="text" name="Location 3" id="ta3" class="changeMe2" maxlength="15"><br /><br />

Bottom Center:<input type="text" name="Location 4" id="ta4" class="changeMe2" maxlength="25">

      <font color="#000000">Font Style :</font>
        <select id="size" >
            <option value="0">[No Engraving]</option>
            <option value="variant">Small Caps</option>
            <option value="uppercase">All Caps</option>
            <option value=" lowercase">No Caps</option>
            <option value="capitalize">Normal</option>
        </select>
</form>

 <div id="container3" class="changeMe2" style="left:112px; font-size:18px; text-align:center;letter-spacing:-1px;
    position: absolute;
    top:117px;
    z-index: 999;">

        <div id="float3">

               <p>              
                </p>   
        </div>
    </div>


 <div id="container4" class="changeMe2" style="left:109px; font-size:18px; text-align:center;letter-spacing:-1px;
    position: absolute;
    top: 217px;
    z-index: 999;">
        <div id="float4">
            <p>           
             </p>
        </div>
    </div>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="arctext.js"></script>
<script type="text/javascript">
$(window).load(function(){
    function curveTop(){
        var text = '<p>' + $('#ta3').val() + '</p>',
               size = $('#size').val();

        $('#float3')
            .css({
               fontStyle: size
            })
            .html(text)
            .find('p')
            .arctext({radius:80});

        }

    $('#ta3').keyup( curveTop );
    $("#size").change( curveTop );

    function curveBottom(){
        var text = '<p>' + $('#ta4').val() + '</p>',
            size  = $('#size').val();


        $('#float4')
            .css({
               fontStyle: size
            })
            .html(text)
            .find('p')
            .arctext({radius: 80, dir: +2});

        }

    $('#ta4').keyup( curveBottom );
    $("#size").change( curveBottom );
});


$('#ta3').keyup(function(){
                $('#float3').html("<p align = 'center'>"+$(this).val()+"</p>");
            });

             $("#size").change(function() {
                 if($("#size option:selected").val()=="variant") {
                  $('#float3').css("font-variant", "small-caps");
                  }

                  else{
                  $('#float3').css("font-variant", "normal");
                  $('#float3').css("text-transform", $(this).val());

                  }
            });


             $('#ta4').keyup(function(){
                $('#float4').html("<p align = 'center'>"+$(this).val()+"</p>");
            });
                        $("#size").change(function() {
                 if($("#size option:selected").val()=="variant") {
                  $('#float4').css("font-variant", "small-caps");
                  }

                  else{
                  $('#float4').css("font-variant", "normal");
                  $('#float4').css("text-transform", $(this).val());

                  }
            });

</script>
</head>



</body>

</html>

请参阅此代码，请做必要的事情。

4

1 回答 1

0

我把你的例子放在 jsFiddle 上：http:
//jsfiddle.net/h5c6Y/2/

正如您在 Firefox 和 Chrome 中所期望的那样，文本是大写的。除非您在应用文本转换后更新文本，否则它在 IE 8 中不起作用。因此，我修改了您的代码以在应用转换后更新文本。

$("#size").change(function() {
    if($("#size option:selected").val()=="variant") {
        $('#float3,#float4').css("font-variant", "small-caps");
    } else {
        $('#float3,#float4').css("font-variant", "normal");
        $('#float3,#float4').css("text-transform", $(this).val());
    }
    // Added the next two lines to force IE to refresh the text
    $('#float3').html("<p align = 'center'>"+$(this).val()+"</p>");
    $('#float4').html("<p align = 'center'>"+$(this).val()+"</p>");
});
于 2012-06-22T14:46:56.410 回答