-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 に答える