ChatGPT解决这个技术问题 Extra ChatGPT

如何禁用 textarea 的 resizable 属性?

我想禁用 textarea 的可调整大小的属性。

目前,我可以通过单击 textarea 的右下角并拖动鼠标来调整 textarea 的大小。我怎样才能禁用它?

https://i.stack.imgur.com/xrfWQ.png

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

J
JSman225

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

textarea {
  resize: none;
}

要为某些(但不是全部)textarea 禁用它,有一个 couple of options

您可以在标签 (<textarea class="textarea1">) 中使用 class 属性:

.textarea1 {
  resize: none;
}

要禁用将 name 属性设置为 foo(即 <textarea name="foo"></textarea>)的特定 textarea

textarea[name=foo] {
  resize: none;
}

或者,使用 id 属性(即 <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

W3C page 列出了调整大小限制的可能值:none、both、horizontal、vertical 和 inherit:

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:horizontal 将调整大小限制为一维。或者使用 max-width、max-height、min-width 和 min-height 中的任何一个。
我是唯一一个觉得使用 css 而不是属性设置它很奇怪的人吗?为什么我不能使用 CSS 设置 disabled 或 checked 或其他属性...
@Buksy 因为“禁用”是一种状态,而不是视觉属性。因此,它不应该由样式语言决定是合乎逻辑的。
J
Jeff Parker

在 CSS ...

textarea {
    resize: none;
}

C
Community

我发现了两件事:

第一的

textarea{resize: 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>

一些浏览器

互联网浏览器 8

https://i.stack.imgur.com/IObIu.png

火狐 17.0.1

https://i.stack.imgur.com/Xr3ub.png

铬合金

https://i.stack.imgur.com/VxYgY.png


P
Peter Mortensen

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

textarea { resize: none; }

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

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


但这将是用户故意破坏他们的布局,而不是用户只需要调整他/她的 texarea 的大小并最终使某些东西不起作用
I
Imtiaz Ali Baigal
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

P
Peter Mortensen

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

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 一起使用,以防止手柄出现在底角,这令人沮丧地不起作用。
P
Peter Mortensen

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

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

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


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

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

resize 属性指定元素是否可以由用户调整大小。注意:resize 属性适用于计算出的溢出值不是“可见”的元素。

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

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

无调整大小:

textarea {
  resize: none;
}

双向调整大小(垂直和水平):

textarea {
  resize: both;
}

垂直调整大小:

textarea {
  resize: vertical;
}

水平调整大小:

textarea {
  resize: horizontal;
}

此外,如果您的 CSS 或 HTML 中有 widthheight,它将阻止您的 textarea 调整大小,并提供更广泛的浏览器支持。


Q
Quentin

要禁用调整大小属性,请使用以下 CSS 属性:

resize: none;

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

或在 元素标签之间,如下所示: textarea { resize: none; }


P
Peter Mortensen

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

textarea {
    resize: none;
}

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

resize: vertical;

或者

resize: horizontal;

I
Ismoil Shokirov

使用此属性 resize: none;

textarea {
  resize: none;
}

P
Peter Mortensen

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

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

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

See Demo


P
Peter Mortensen

要为所有 textarea 禁用调整大小:

textarea {
    resize: none;
}

要禁用特定 textarea 的调整大小,请添加属性 nameid 并将其设置为某些内容。在这种情况下,它被命名为 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;
}

A
Ambuj Khanna

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

.resizeable { 调整大小:两者; } .noResizeable { 调整大小:无; } .resizeable_V { 调整大小:垂直; } .resizeable_H { 调整大小:水平; }


I
Ismoil Shokirov
textarea {
  resize: none;
}

上面的代码将禁用项目中所有 <textarea/> 元素的 resizable 属性。如果你想要那很好,否则你会想要为你的 textarea 元素使用一个特定的类。

.not-resizable {
   resize: none;
}

在您的 HTML 中

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

B
Baptiste Mille-Mathias

使用 @style,您可以为其指定自定义大小并禁用调整大小功能 (resize: none;)

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

您好,谢谢您的回答,下次请格式化代码。
这是基于 asp.net MVC 的答案。非常好。
S
Santosh Khalse

您也可以尝试使用 jQuery

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

您应该use more jquery。你还不够用。 :)
It is a meme - 例如,“你应该完全放弃它并尝试 jQuery。”
P
Peter Mortensen

添加 !important 使其工作:

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

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


不要滥用 !important 属性。固定宽度没有意义&如果 CSS 属性 resize: none 可以移除调整大小功能,则高度
!important 不是邪恶的吗?
在当前的 Chrome 中,这会停止水平调整大小,但我仍然可以垂直调整 textarea 的大小。
在极少数情况下,这可能很有用。