如何禁用textarea的resizable属性？

最新推荐文章于 2022-12-23 09:02:08 发布

p15097962069

最新推荐文章于 2022-12-23 09:02:08 发布

阅读量1.1k

点赞数

文章标签： html css

原文链接：https://da.sofbug.com/question/Lxtm

版权

我想禁用textarea的resizable属性。

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

#1楼

我发现了两件事：

第一

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

在此处输入图片说明

Firefox 17.0.1

在此处输入图片说明

#2楼

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

#3楼

添加!important使其起作用：

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

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

#4楼

如果您需要深入的支持，可以使用一种过时的技巧：

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;
}

#5楼

这可以用HTML轻松完成：

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

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

#6楼

CSS 3可以解决此问题。不幸的是，目前只有60％的二手浏览器支持它。

对于Internet Explorer和iOS，您无法关闭大小调整功能，但是可以通过设置textarea的width和height来限制其width 。

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

观看演示

#7楼

要禁用resize属性，请使用以下CSS属性：

resize: none;

您可以将其用作内联样式属性，如下所示：
```
 <textarea style="resize: none;"></textarea> 
```
或在<style>...</style>元素标签之间，如下所示：
```
 textarea { resize: none; } 
```

#8楼

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

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;
}

#9楼

您也可以尝试使用jQuery

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

#10楼

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

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

注意： resize属性适用于其计算的溢出值不是“ visible”的元素。

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

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

不调整大小：

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

垂直调整大小：

textarea {
  resize: vertical;
}

水平调整大小：

textarea {
  resize: horizontal;
}

另外，如果CSS或HTML中具有width和height ，则可以通过更广泛的浏览器支持来防止调整textarea的大小。

#11楼

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

textarea {
    resize: none;
}

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

resize: vertical;

要么

resize: horizontal;

#12楼

尝试这个：

 #foo { resize: none; }

 <textarea rows="4" cols="50" name="foo" id="foo"> Minisoft is the best website and software development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd </textarea>

#13楼

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

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

#14楼

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

textarea {
  resize: none;
}

要针对某些（但不是全部） textarea禁用它，有两个选项。

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

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

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

#foo {
  resize: none;
}

W3C页面列出了可能的大小调整限制值：无，水平，垂直和继承都没有：

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

查看良好的兼容性页面，以了解当前哪些浏览器支持此功能。正如Jon Hulka所说，可以在CSS中使用max-width，max-height，min-width和min-height 进一步限制尺寸。

要知道的超级重要：

除非overflow属性是可见的以外的其他属性，否则此属性将不执行任何操作。因此，通常要使用此功能，您必须设置类似overflow的内容：

克里斯·科耶尔（Chris Coyier）的报价， http： //css-tricks.com/almanac/properties/r/resize/

#15楼

在CSS中...

textarea {
    resize: none;
}

#16楼

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

textarea { resize: none; }

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

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

#17楼

我创建了一个小演示，以显示调整大小属性的工作方式。我希望它对您和其他人也有帮助。

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

#18楼

使用resize css属性。

textarea {
 resize:none;
}

它将禁用所有textarea的可调整大小的属性。

要禁用特定文本区域，请使用以下说明

要使用id textarea1禁用textarea的resizable属性，请使用此代码

#textarea1 {
 resize:none;
}

要禁用名为textareaname1的textarea的resizable属性，请使用此代码

textarea[name="textareaname1"] {
 resize:none;
}

p15097962069

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何禁用textarea的resizable属性？

我想禁用textarea的resizable属性。目前，我可以调整一个textarea通过点击的右下角textarea并拖动鼠标。如何禁用此功能？
复制链接

扫一扫