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

Posted 2023-05-07

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

【英文标题】：Changing font name and size in HTML text area with ASP.net

【发布时间】：2011-12-16 07:51:00

【问题描述】：

我有一个空的 div 元素，其中有一个 htmltext 区域，现在我有 2 个下拉列表，一个用于字体名称，另一个用于字体大小。

现在，如果我在 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>

【参考方案1】：

您将不得不使用客户端脚本来实现您想要做的事情。理想情况下，我建议使用 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);
);

您在使用 asp.net 时可能遇到的一个症结是获取下拉列表 ID，因为它是动态生成的。您可以改用一个类来识别它或使用内联脚本在您的 javascript 中获取它的客户端 ID 属性：

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

【讨论】：

你能给我一个样本吗？

【参考方案2】：

您应该将AutoPostBack 添加到您的textbox，并将AutoPostBack 添加到dropdownlist。 通过使用dropdown 中的SelectedIndexChanged Event，您可以匹配来自text box 的文本和dropdown list 的值

希望对你有帮助

【参考方案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>