ASP.netでのHTMLテキスト領域のフォント名とサイズの変更

Question

空のdiv要素があり、HTMLtext領域があり、2つのドロップダウンリストが1つあり、もう1つはフォント名用で、もう1つはフォント用ですサイズ。

Nowテキストエリアに何かを書き込むと、ドロップダウンリストからフォント名を選択すると、テキストがテキストエリアにすぐに反映されるはずです。どうすればいいですか？

は、ここに私のコードです：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    For Each f As System.Drawing.FontFamily In System.Drawing.FontFamily.Families 
     DropFont.Items.Add(f.Name) 
    Next 
End Sub 

これは私の設計コードです：あなたはあなたが何をしたいかを達成するために、クライアント側スクリプトを使用する必要があるとしている

<div class="exampe"> 
<textarea name="TextBox1" rows="2" id="TextBox1" cols="20"></textarea> 
</div> 


    <asp:DropDownList ID="DropFontSize" runat="server"> 
            <asp:ListItem Value="6">6</asp:ListItem> 
            <asp:ListItem Value="8">8</asp:ListItem> 
            <asp:ListItem Value="10">10</asp:ListItem> 
            <asp:ListItem Value="12">12</asp:ListItem> 
            <asp:ListItem Value="14">14</asp:ListItem> 
            <asp:ListItem Value="18">18</asp:ListItem> 
            <asp:ListItem Value="24">24</asp:ListItem> 
            <asp:ListItem Value="32">32</asp:ListItem> 
            <asp:ListItem Value="36">36</asp:ListItem> 
            <asp:ListItem Value="40">40</asp:ListItem> 
            <asp:ListItem Value="48">48</asp:ListItem> 
            <asp:ListItem Value="52">52</asp:ListItem> 
            <asp:ListItem Value="56">56</asp:ListItem> 
            <asp:ListItem Value="62">62</asp:ListItem> 
            <asp:ListItem Value="68">68</asp:ListItem> 
            <asp:ListItem Value="72">72</asp:ListItem> 
           </asp:DropDownList> 

Answer 1

。理想的には、jQueryを使用して、ドロップダウンリストの変更イベントをプラグインすることをお勧めします。セレクションに基づいて、テキストエリアにCSSクラスを適用するか、テキストエリアのCSSプロパティを使用してフォントファミリを変更します。すべての作成を避けるために、代わりに

$('#fonts').change(function() { 
    var fontfamily = $('#fonts').val(); 
    $('#TextBox1').removeClass(); 
    $('#TextBox1').addClass(fontfamily); 
}); 

：スタイルを変更するには

<select id="fonts"> 
    <option value="arial">Arial</option> 
    <option value="verdana">Verdana</option> 
</select> 

<textarea name="TextBox1" rows="2" id="TextBox1" cols="20"></textarea> 

使用このjQueryの次のHTML用

<style> 
    .arial { 
     font-family: arial; 
    } 

    .verdana { 
     font-family: verdana; 
    } 
</style> 

：あなたのヘッダーやスタイルシートのセットにおいて

フォントクラスは、CSSプロパティを使用してください：

$('.target').change(function() { 
    var fontfamily = $('.target').val(); 
    $('#TextBox1').css('font-family', fontfamily); 
}); 

これはダイナミックに生成されるので、asp.netに遭遇する可能性があります。あなたはそれを識別したり、それはあなたのjavascript内のクライアントIDのproperyだ得るために、インラインスクリプトを使用する代わりにクラスを使用することもできます。

var ddlId = <%=DropFontSize.ClientID %>; 
var fontfamily = $('#' + ddlId).val(); 

Answer 2

あなたのtextboxと同様にdropdownlistからAutoPostBackにAutoPostBackを追加する必要があります。 dropdownのSelectedIndexChanged Eventを使用することにより、あなたがtext boxからテキストとdropdown list

希望の値を一致させることができ、この私はこの方法でやっで達成している

Answer 3

を助け

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#DropFont").change(
    function() { 
     var fontname = $("#DropFont").val(); 
     $("#TextBox1").css("font-family", fontname); 
    } 
), 

$("#DropFontSize").change(
    function() { 
     var fontsize = $("#DropFontSize").val(); 
     $("#TextBox1").css("font-size", fontsize); 
} 
) 
}) 
    </script>