可调整大小的文本框/区域
Posted
技术标签:
【中文标题】可调整大小的文本框/区域【英文标题】：Resizable Text Box/Area 【发布时间】：2011-11-02 07:24:48 【问题描述】：如果需要，我需要一个可以调整大小以扩展可视区域的文本框或文本区域。目前我的 html 被放在一个表格中：
<table>
<tr>
<td>
<Grid>
</td>
<td>
<TextArea>
</td>
</tr>
</table>
这个网格和文本区域之间应该有一条线，所以如果我扩大一个，另一个缩小，反之亦然。我尝试了一些 jQuery，但我认为会有一个简单的 asp.net 控件可以完成此操作。有人知道我可以用什么来完成这个看似简单的任务吗？
谢谢
【问题讨论】：
【参考方案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 完成的
【讨论】：
以上是关于可调整大小的文本框/区域的主要内容，如果未能解决你的问题，请参考以下文章
外部 jquery 可拖动/可调整大小的 div 不允许我选择内部跨度的文本
为啥手动调整 Visjs 时间线图的高度（可调整大小）不起作用？