如何禁用textarea的可调整大小的属性?

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

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


以下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页面列出了调整大小限制的可能值:none,none,horizo​​ntal,vertical和inherit:

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

查看一个体面的兼容性页面,查看目前支持该功能的浏览器。 正如Jon Hulka所评论的那样,使用最大宽度,最大高度,最小宽度和最小高度,可以在CSS中进一步限制尺寸。

超级重要知道:

这个属性什么也不做,除非溢出属性不是可见的,这是大多数元素的默认属性。 所以一般来说,要使用这个,你必须设置一些像overflow:scroll;

引用克里斯Coyier,http://css-tricks.com/almanac/properties/r/resize/


在CSS中...

textarea {
    resize: none;
}

我发现了两件事

第一

textarea{resize:none}

这是一个css3,它没有与Firefox4 + Chrome和Safari浏览器兼容

另一种格式功能是溢出:自动摆脱右侧滚动条考虑dir属性

代码和不同的浏览器

基本的HTML

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

一些浏览器

  • IE8
  • 在这里输入图像描述

  • FF 17.0.1
  • 在这里输入图像描述

    链接地址: http://www.djcxy.com/p/711.html

    上一篇: How to disable resizable property of textarea?

    下一篇: How to list the properties of a JavaScript object?