为ASP.NET多行TextBox添加jQuery实现IE兼容的双向可调整大小功能

没问题，针对IE不支持CSS resize:both 的情况，用jQuery UI的resizable组件就能完美实现textarea（也就是你的ASP.NET MultiLine TextBox）的右下角双向拖拽调整功能，我给你梳理下具体步骤：

1. 确保引入必要的依赖 #

resizable是jQuery UI提供的功能，不是原生jQuery自带的，所以你需要先引入这几个本地文件：

<!-- 引入jQuery核心库（建议选用兼容IE的版本，比如3.x系列支持IE11） -->
<script src="scripts/jquery.min.js"></script>
<!-- 引入jQuery UI库 -->
<script src="scripts/jquery-ui.min.js"></script>
<!-- 引入jQuery UI的样式文件，用来正常显示resize的拖拽手柄 -->
<link rel="stylesheet" href="styles/jquery-ui.css">

2. 优化你的jQuery代码 #

原代码里的$("textArea")选择器会选中页面上所有textarea，建议用你TextBox的CssClass来精准定位，避免影响其他控件，同时可以添加配置让resize行为更贴合需求：

$(function () {
    // 针对目标TextBox生成的textarea启用resize功能
    $(".textboxBootstrapCss").resizable({
        handles: "se", // 指定仅右下角可拖拽，和原生resize的交互逻辑一致
        minWidth: 240, // 设置最小宽度，防止控件被拉得过窄（可按需调整）
        minHeight: 60, // 设置最小高度（可按需调整）
        stop: function(event, ui) {
            // 如果需要在调整完成后执行额外操作（比如同步高度到关联控件），可以在这里添加逻辑
        }
    });
});

3. 你的ASP.NET控件代码无需修改 #

原有的控件代码完全可以保留，因为ASP.NET的TextBox设置TextMode="MultiLine"后会自动渲染成<textarea>，jQuery UI的resizable可以直接作用于它：

<div class="control">
    <asp:TextBox runat="server" Rows="2" ID="TextBox1" Width="80%" EnableViewState="false" ViewStateMode="Disabled" CssClass="textboxBootstrapCss" TextMode="MultiLine" />
    <asp:Label runat="server" ID="Label1" Visible="false" ViewStateMode="Disabled" EnableViewState="false" AssociatedControlID="TextBox1" />
</div>

小提示 #

• 如果需要兼容IE10及以下版本，建议选用jQuery 2.x系列的版本
• 务必确保jQuery UI的样式文件正确引入，否则resize的拖拽手柄可能无法正常显示

内容的提问来源于stack exchange，提问作者lanes123