可调整大小的文本框/区域答案

【问题标题】：Resizable Text Box/Area可调整大小的文本框/区域
【发布时间】：2011-11-02 07:24:48
【问题描述】：

如果需要，我需要一个可以调整大小以扩展可视区域的文本框或文本区域。目前我的 html 被放在一个表格中：

<table>
  <tr>
    <td>
      <Grid>
    </td>
    <td>
      <TextArea>
    </td>
  </tr>
</table>

这个网格和文本区域之间应该有一条线，所以如果我扩大一个，另一个缩小，反之亦然。我尝试了一些 jQuery，但我认为会有一个简单的 asp.net 控件可以完成此操作。有人知道我可以用什么来完成这个看似简单的任务吗？

谢谢

【问题讨论】：

标签： asp.net controls textarea

【解决方案1】：

AjaxControlToolkit 有一个 ResizableControl 扩展器 - 请参阅 http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ResizableControl/ResizableControl.aspx

要使用它，您需要下载 AjaxControlToolkit 并在您的项目中添加对它的引用。您还需要注册它提供给您的控件，如果您想使用 ASPX 页面顶部的 <% Register 指令，您可以在各个页面中执行此操作，但这些天我发现最简单的方法是将它注册到网络配置。将此块添加到您的 web.config 中的 <system.web> 部分下：

<pages>
    <controls>
        <add tagPrefix="ajaxtoolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" /> 
    </controls>
</pages>

然后在您的页面中，您可以像这样将扩展器附加到您的网格中：

<asp:gridview id="MyGridView" ... >
</asp:gridview>
<ajaxtoolkit:ResizableControlExtender TargetControlId="MyGrid" />
<hr/>
<asp:textbox id="MyTextArea" ... />

根据您的问题，我认为您只想垂直调整大小，因此您希望将 MinimumWidth 和 MaximumWidth 属性设置为相同的值。当你增加另一个的大小时，诀窍在于减小一个的大小，尽管扩展器为你提供了一些事件，你可以将一些 JavaScript 挂钩，这很可能能够做到这一点。

【讨论】：

那么，我必须下载 Ajax 控件工具包，然后才能在我的代码中使用这个控件？
@Music Magi 我添加了一些标记，可以指导您使用该工具包。如果以后有时间，我也会研究一下它的 JavaScript 方面。

【解决方案2】：

jQuery UI Resizable 怎么样？

看看这个：http://jqueryui.com/resizable/#textarea

这是整个页面。你可以检查一些可调整大小的选项。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Resizable - Textarea</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  .ui-resizable-se {
    bottom: 17px;
  }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      handles: "se"
    });
  });
  </script>
</head>
<body>

<textarea id="resizable" rows="5" cols="20"></textarea>


</body>
</html>

【讨论】：

这对我不起作用。这是我的控制：，我的脚本：
和 jQuery： $(function() { $('.resizable').resizable({ handles: 'se' }); });知道出了什么问题吗？谢谢！
我试过你的代码，但它只显示一个带有 textarea 的页面，没有任何调整大小的功能。我可以输入文本并且它是可滚动的。但是，如果我将鼠标悬停在文本框的两侧，则无法拖动边缘来调整框的大小。
我认为它工作正常。请提供您认为它不起作用的页面链接。这样我就可以看看你的代码了。

【解决方案3】：

我是使用 Telerik.RadSplitter 完成的

【讨论】：