使用ASP.net更改HTML文本区域中的字体名称和大小

我有一个空的div元素，其中我有一个HTMLtext区域，现在我有2个下拉列表，一个是字体名称，另一个是字体尺寸。使用ASP.net更改HTML文本区域中的字体名称和大小

现在，如果我在textarea中写了一些东西，并且如果我从下拉列表中选择一些字体名称，文本应该立即反映在textarea中，那么我该怎么做？

这里是我的代码：

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>

来源

2011-10-27 coder

你将不得不使用客户端脚本来实现你想要做什么。理想情况下，我会建议使用jQuery插入到你的下拉列表的变化事件，并根据选择应用一个CSS类到你的textarea或使用textarea的CSS属性来更改字体系列。

在你的头或样式集：

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

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

对于下面的html：

<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来改变风格：

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

或者，以避免产生所有字体类，只需使用css属性：

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

您可能遇到的一个棘手的问题就是获取下拉列表ID，因为这是动态生成的。你可以使用一个类，而不是识别或使用内嵌脚本到您在JavaScript中获得它的客户端ID属性格式：

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

来源

2011-10-27 08:20:33

你能提供给我一个样品开始。 – coder

您应该AutoPostBack你textbox和以及AutoPostBack添加到dropdownlist。通过使用dropdown的SelectedIndexChanged Event可以匹配来自text box文字和dropdown list

希望的值，这有助于

来源

2011-10-27 08:20:49

我已经在通过这样做来实现

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

来源

2011-10-27 08:32:40 coder

使用ASP.net更改HTML文本区域中的字体名称和大小

回答

相关问题