当前位置： 文江博客话题详情

如何禁用文本区域的可调整大小属性？

发布于 2024-10-20 18:35:21 字数 267 浏览 3 评论 0原文

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

目前，我可以通过单击 textarea 的右下角并拖动鼠标来调整 textarea 的大小。我怎样才能禁用这个功能？

输入图片描述这里

原文

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

Enter image description here

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（21）

三人与歌 2024-10-27 18:35:21

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

textarea {
  resize: none;
}

要禁用某些（但不是全部）textarea，可以使用 几个选项。

您可以在标记中使用 class 属性 (

.textarea1 {
  resize: none;
}

要禁用特定的 textarea，请使用 < code>name 属性设置为 foo （即 ）：

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

或者，使用 < code>id 属性（即 ）：

#foo {
  resize: none;
}

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

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

查看一个不错的 兼容性页面 查看当前有哪些浏览器支持此功能。正如 Jon Hulka 所评论的，尺寸可以在 CSS 中使用 max-width、max-height、进一步限制，最小宽度和最小高度。

非常重要的了解：

除非溢出属性不是可见属性（这是大多数元素的默认属性），否则此属性不会执行任何操作。因此，通常要使用它，您必须设置诸如溢出：滚动；

引用萨拉·科普的话，
http://css-tricks.com/almanac/properties/r/resize/


The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

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

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

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

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Quote by Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/

回复 原文
云胡 2024-10-27 18:35:21

在CSS中：

textarea {
    resize: none;
}

In CSS:

textarea {
    resize: none;
}
回复 原文
任性一次 2024-10-27 18:35:21

我发现了两件事：

首先

textarea{resize: none}

这是一个CSS 3，尚未发布，与Firefox 4（及更高版本）、Chrome 和 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

Enter此处图像描述

  • Firefox 17.0.1

此处输入图像描述

  • Chrome

在此处输入图像描述

I found two things:

First

textarea{resize: none}

This is a CSS 3, which is not released yet, compatible with Firefox 4 (and later), Chrome, and Safari.

Another format feature is to overflow: auto to get rid of the right scrollbar, taking into account the dir attribute.

Code and different browsers

Basic HTML

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

Some browsers

  • Internet Explorer 8

Enter image description here

  • Firefox 17.0.1

Enter image description here

  • Chrome

Enter image description here

回复 原文
望笑 2024-10-27 18:35:21

CSS 3 为 UI 元素提供了一个新属性，允许您执行此操作。该属性是调整大小属性。因此，您可以将以下内容添加到样式表中以禁用所有文本区域元素的大小调整：

textarea { resize: none; }

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

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

CSS 3 has a new property for UI elements that will allow you to do this. The property is the resize property. So you would add the following to your stylesheet to disable resizing of all textarea elements:

textarea { resize: none; }

This is a CSS 3 property; use a compatibility chart to see browser compatibility.

Personally, I would find it very annoying to have resizing disabled on textarea elements. This is one of those situations where the designer is trying to "break" the user's client. If your design can't accommodate a larger textarea, you might want to reconsider how your design works. Any user can add textarea { resize: both !important; } to their user stylesheet to override your preference.

回复 原文
绻影浮沉 2024-10-27 18:35:21
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
回复 原文
晨敛清荷 2024-10-27 18:35:21

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

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; /* If you wnt to hide the handle in the lower right corner */;
}

If you need deep support, you can use an old school technique:

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; /* If you wnt to hide the handle in the lower right corner */;
}
回复 原文
再可℃爱ぅ一点好了 2024-10-27 18:35:21

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

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

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

This can be done in HTML easily:

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

This works for me. The default value is true for the draggable attribute.

回复 原文
夜空下最亮的亮点 2024-10-27 18:35:21

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

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

注意：调整大小属性适用于计算溢出的元素
价值是“可见”以外的东西。

此外，目前 Internet Explorer 还不支持调整大小。

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

不调整大小：

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

垂直调整大小：

textarea {
  resize: vertical;
}

水平调整大小：

textarea {
  resize: horizontal;
}

此外，如果您的 CSS 或 HTML 中有 width 和 height，它将阻止您的文本区域调整大小，并具有更广泛的浏览器支持。

You simply use: resize: none; in your CSS.

The resize property specifies whether or not an element is resizable
by the user.

Note: The resize property applies to elements whose computed overflow
value is something other than "visible".

Also resize not supported in Internet Explorer at the moment.

Here are different properties for resize:

No Resize:

textarea {
  resize: none;
}

Resize both ways (vertically & horizontally):

textarea {
  resize: both;
}

Resize vertically:

textarea {
  resize: vertical;
}

Resize horizontally:

textarea {
  resize: horizontal;
}

Also if you have width and height in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.

回复 原文
ˇ宁静的妩媚 2024-10-27 18:35:21

使用此属性resize: none;

textarea {
  resize: none;
}

Use this property resize: none;

textarea {
  resize: none;
}
回复 原文
最单纯的乌龟 2024-10-27 18:35:21

您可以简单地禁用 textarea 属性，如下所示：

textarea {
    resize: none;
}

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

resize: vertical;

或

resize: horizontal;

You can simply disable the textarea property like this:

textarea {
    resize: none;
}

To disable vertical or horizontal resizing, use

resize: vertical;

or

resize: horizontal;
回复 原文
夜深人未静 2024-10-27 18:35:21

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

resize: none;

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

  • 或在

    元素标签之间应用，如下所示：

    <前><代码>文本区域{
    调整大小：无；
    }

To disable the resize property, use the following CSS property:

resize: none;

  • You can either apply this as an inline style property like so:

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

  • or in between <style>...</style> element tags like so:

    textarea {
    resize: none;
}
回复 原文
一花一树开 2024-10-27 18:35:21

您需要在 component.css 中设置以下 CSS 代码

textarea {
    resize: none;
}

you need to set the below CSS code in your component.css

textarea {
    resize: none;
}
回复 原文
无语# 2024-10-27 18:35:21
textarea {
  resize: none;
}

上面的代码将禁用项目中所有 

.not-resizable {
   resize: none;
}

在你的 HTML 中

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

textarea {
  resize: none;
}

The code above will disable the resizable property of all <textarea/> elements in your project. If you want that that is fine, otherwise you would want to use a specific class for your textarea elements.

.not-resizable {
   resize: none;
}

In your HTML

<textarea class="not-resizable"></textarea>
回复 原文
咽泪装欢 2024-10-27 18:35:21

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

.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>

I have created a small demo to show how resize properties work. I hope it will help you and others as well.

.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>

回复 原文
溺深海 2024-10-27 18:35:21

CSS 3 可以解决这个问题。不幸的是，目前仅 60% 的常用浏览器支持它。

对于 Internet Explorer 和 iOS，您无法关闭调整大小，但您可以通过设置其宽度和高度来限制textarea尺寸。

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

查看演示

CSS 3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.

For Internet Explorer and iOS you can't turn off resizing, but you can limit the textarea dimension by setting its width and height.

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

See Demo

回复 原文
亚希 2024-10-27 18:35:21

要禁用所有 textarea 的大小调整：

textarea {
    resize: none;
}

要禁用特定 textarea 的大小调整，请添加属性、name 或 id< /code> 并将其设置为某些内容。在本例中，它被命名为 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;
}

To disable resize for all textareas:

textarea {
    resize: none;
}

To disable resize for a specific textarea, add an attribute, name, or an id and set it to something. In this case, it is named 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;
}
回复 原文
有深☉意 2024-10-27 18:35:21

您可以使用 textarea {resize: none;}

textarea {
   resize: none;
}

Demo

You can disable resizeable property of textarea using textarea {resize: none;}

textarea {
   resize: none;
}

Demo

回复 原文
勿忘心安 2024-10-27 18:35:21

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

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

With @style, you can give it a custom size and disable the resize feature (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
回复 原文
丑疤怪 2024-10-27 18:35:21

你也可以尝试使用 jQuery

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

You can try with jQuery also

$('textarea').css("resize", "none");
回复 原文
有深☉意 2024-10-27 18:35:21

添加 !important 使其起作用：

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

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

Adding !important makes it work:

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

outline is just to avoid the blue outline on certain browsers.

回复 原文
初吻给了烟 2024-10-27 18:35:21

如果有人正在寻找一种用普通 Javascript 实现此目的的方法：

textArea = document.createElement("textarea");
textArea_input.setAttribute("style","resize:none");

注意：以这种方式设置 style 属性将覆盖您之前的所有 css 样式声明。

If anyone is looking for a way to this in plain Javascript:

textArea = document.createElement("textarea");
textArea_input.setAttribute("style","resize:none");

Note: Setting the style property this way will overwrite all your prior css style declarations.

回复 原文
~没有更多了~

关于作者

千鲤

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文