Question

我有一个空的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>

Answer 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();

Answer 2

您应该将AutoPostBack添加到textbox以及AutoPostBack添加到dropdownlist。使用dropdown的{{3}}，您可以匹配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>

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

3 个答案: