如何禁用 textarea 的 resizable 属性？

Posted

技术标签:

【中文标题】如何禁用 textarea 的 resizable 属性？【英文标题】：How do I disable the resizable property of a textarea? 【发布时间】：2014-05-25 19:03:46 【问题描述】：

我想禁用 textarea 的 resizable 属性。

目前，我可以通过单击textarea 的右下角并拖动鼠标来调整textarea 的大小。如何禁用此功能？

【问题讨论】：

@JDIsaaks - 此外，在某些情况下允许调整大小可能会破坏布局和可打印性（当前关键任务项目的一个重要方面）。 有时你确实想要一个不可调整大小的文本区域。例如，在这种情况下，当您（有条件地）将 textarea 转换为看起来像标签的东西时。旁边有一个随机浮动抓取器的标签看起来真的很奇怪。 出于对美好事物的热爱，请不要在实际的文本区域上执行此操作，否则您会疏远您的高级用户。破坏核心浏览器功能应被视为核选项。 【参考方案1】：

以下 CSS 规则禁用 textarea 元素的大小调整行为：

textarea 
  resize: none;

要为某些（但不是全部）textareas 禁用它，有一个couple of options。

您可以在标签中使用class 属性（<textarea class="textarea1">）：

.textarea1 
  resize: none;

要禁用特定的textarea，并将name 属性设置为foo（即<textarea name="foo"></textarea>）：

textarea[name=foo] 
  resize: none;

或者，使用id 属性（即<textarea id="foo"></textarea>）：

#foo 
  resize: none;

W3C page 列出了调整大小限制的可能值：无、两者、水平、垂直和继承：

textarea 
  resize: vertical; /* user can resize vertically, but width is fixed */

查看一个像样的compatibility page 以了解当前支持此功能的浏览器。正如 Jon Hulka 评论的那样，在 CSS 中使用 max-width、max-height、min-width 和 min-height，尺寸可以是 further restrained。

知道的超级重要：

这个属性什么都不做，除非溢出属性不是可见的，这是大多数元素的默认值。所以通常要使用这个，你必须设置像溢出一样的东西：滚动；

Sara Cope 的名言， http://css-tricks.com/almanac/properties/r/resize/

【讨论】：

有 Firefox、Opera 和/或 IE 的解决方案吗？ @Šime IE 和 FF3（及更早版本）不支持调整大小，因此不需要针对它们的解决方案。对于 FF4，这个解决方案应该可以工作。 根据davidwalsh.name/textarea-resize - 使用 resize:vertical 或 resize:horizo​​ntal 将调整大小限制为一维。或者使用 max-width、max-height、min-width 和 min-height 中的任何一个。 我是唯一一个觉得使用 css 而不是属性设置它很奇怪的人吗？为什么我不能使用 CSS 设置 disabled 或 checked 或其他属性... @Buksy 因为“禁用”是一种状态，而不是视觉属性。因此，它不应该由样式语言决定是合乎逻辑的。【参考方案2】：

在 CSS 中 ...

textarea 
    resize: none;

【讨论】：

【参考方案3】：

CSS 3 为 UI 元素提供了一个新属性，可让您执行此操作。该属性是resize property。因此，您将在样式表中添加以下内容以禁用所有 textarea 元素的大小调整：

textarea  resize: none;

这是一个 CSS 3 属性；使用compatibility chart 查看浏览器兼容性。

就我个人而言，我会发现在 textarea 元素上禁用调整大小非常烦人。这是设计者试图“破坏”用户客户端的情况之一。如果您的设计无法容纳更大的文本区域，您可能需要重新考虑您的设计是如何工作的。任何用户都可以将textarea resize: both !important; 添加到他们的用户样式表中以覆盖您的偏好。

【讨论】：

但这将是用户故意破坏他们的布局，而不是用户只需要调整他/她的texarea 的大小并最终使某些东西不起作用跨度> 【参考方案4】：

我发现了两件事：

第一

textarearesize: none

这是一个 CSS 3，尚未发布，与 Firefox 4 (and later), Chrome, and Safari 兼容。

另一个格式功能是overflow: auto 去掉右侧滚动条，同时考虑到dir 属性。

代码和不同的浏览器

基本 html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

一些浏览器

Internet Explorer 8

火狐17.0.1

铬

【讨论】：

【参考方案5】： 
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

【讨论】：

【参考方案6】：

添加!important 使其工作：

width:325px !important; height:120px !important; outline:none !important;

outline 只是为了避免在某些浏览器上出现蓝色轮廓。

【讨论】：

不要滥用!important 属性。如果 CSS 属性 resize: none 可以移除调整大小功能，那么修复宽度和高度毫无意义 !important 不是邪恶的吗？ 在当前的 Chrome 中，这会停止水平调整大小，但我仍然可以垂直调整 textarea 的大小。 在极少数情况下这可能很有用。【参考方案7】：

如果您需要深度支持，可以使用老派技术：

textarea 
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;

【讨论】：

也可以使用resize:none 这个解决方案来防止手柄出现在底角，这令人沮丧地不起作用。【参考方案8】：

这可以很容易地在 HTML 中完成：

<textarea name="textinput" draggable="false"></textarea>

这对我有用。 draggable 属性的默认值为 true。

【讨论】：

这是一个 HTML 5 属性，因此只有较新的浏览器才会支持。我在某处读到 IE 从 9 开始就支持它。 这适用于大多数浏览器。在每个最新的浏览器中。 它不会阻止 textarea 调整大小 @AntonyD'Andrea 这不适用于最新的 Chrome：jsfiddle.net/ps2v8df9【参考方案9】：

CSS 3 可以解决这个问题。不幸的是，它现在仅在 60% of used browsers 上受支持。

对于 Internet Explorer 和 ios，您无法关闭调整大小，但您可以通过设置 width 和 height 来限制 textarea 维度。

/* One can also turn on/off specific axis. Defaults to both on. */
textarea  resize:vertical;  /* none|horizontal|vertical|both */

See Demo

【讨论】：

【参考方案10】：

要禁用调整大小属性，请使用以下 CSS 属性：

resize: none;

您可以将其作为内联样式属性应用，如下所示：

<textarea style="resize: none;"></textarea>

或者在&lt;style&gt;...&lt;/style&gt;元素标签之间，像这样：

textarea 
    resize: none;

【讨论】：

【参考方案11】：

禁用所有textareas 的调整大小：

textarea 
    resize: none;

要禁用特定 textarea 的调整大小，请添加属性 name 或 id 并将其设置为某个值。在这种情况下，它被命名为noresize

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] 
    resize: none;

/* Or using the id */

#noresize 
    resize: none;

【讨论】：

【参考方案12】：

你也可以试试 jQuery

$('textarea').css("resize", "none");

【讨论】：

你应该use more jquery。你还不够用。 :) It is a meme - 例如，“你应该完全放弃它并尝试 jQuery。”.【参考方案13】：

您只需在 CSS 中使用：resize: none;。

resize 属性指定元素是否可调整大小 由用户。

注意： resize 属性适用于计算溢出的元素 value 不是“可见”。

目前 Internet Explorer 不支持调整大小。

以下是调整大小的不同属性：

不调整大小：

textarea 
  resize: none;

双向调整大小（垂直和水平）：

textarea 
  resize: both;

垂直调整大小：

textarea 
  resize: vertical;

水平调整大小：

textarea 
  resize: horizontal;

此外，如果您的 CSS 或 HTML 中有 width 和 height，它将防止您的 textarea 被调整大小，并提供更广泛的浏览器支持。

【讨论】：

【参考方案14】：

您可以像这样简单地禁用 textarea 属性：

textarea 
    resize: none;

要禁用垂直或水平调整大小，请使用

resize: vertical;

或

resize: horizontal;

【讨论】：

【参考方案15】：

使用@style，您可以给它一个自定义大小并禁用调整大小功能(resize: none;)。

@Html.TextAreaFor(model => model.YourProperty, new  @style = "width: 90%; height: 180px; resize: none;" )

【讨论】：

您好，感谢您的回答，下次请格式化代码。 这是基于 asp.net MVC 的答案。非常好。【参考方案16】：

我创建了一个小演示来展示调整大小属性的工作原理。我希望它对你和其他人也有帮助。

.resizeable 
  resize: both;


.noResizeable 
  resize: none;


.resizeable_V 
  resize: vertical;


.resizeable_H 
  resize: horizontal;

<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

【讨论】：

【参考方案17】： 
textarea 
  resize: none;

上面的代码将禁用项目中所有&lt;textarea/&gt; 元素的可调整大小属性。如果你想要那很好，否则你会想要为你的 textarea 元素使用一个特定的类。

 .not-resizable 
    resize: none;

在您的 HTML 中

<textarea class="not-resizable"></textarea>

【讨论】：

【参考方案18】：

使用此属性resize: none;

textarea 
  resize: none;

【讨论】：

以上是关于如何禁用 textarea 的 resizable 属性？的主要内容，如果未能解决你的问题，请参考以下文章

如何限制 chrome 中的最大 textarea 宽度和高度或如何禁用 textarea 调整大小

如何在不禁用整个控件的情况下禁用 TextArea 的鼠标滚轮？

如何禁用 TinyMCE 的 textarea

如何在可编辑的 TextArea 中禁用回车？

如何禁用 TextArea (JavaFX) 中的文本选择？

去掉textarea 右下角图标 resize: none;