关闭文本区域调整大小答案

【问题标题】：Turn off textarea resizing关闭文本区域调整大小
【发布时间】：2012-07-09 05:43:13
【问题描述】：

我正在尝试关闭我网站中的 textarea 调整大小；现在我正在使用这种方法：

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

我知道我的方法不正确，我正在用 JavaScript 寻找更好的方法。我是初学者，所以对我来说最好的解决方案是 HTML5 或 jQuery。

【问题讨论】：

标签： html textarea

【解决方案1】：

试试这个 CSS 来禁用调整大小

禁用所有文本区域大小调整的 CSS 如下所示：

textarea {
    resize: none;
}

您可以改为按名称将其分配给单个 textarea（textarea HTML 所在的位置）：

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

或通过 id（textarea HTML 所在的位置）：

#foo {
    resize: none;
}

取自： http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

【讨论】：

您应该在这里稍微解释一下，而不是仅仅链接到一个解决方案。将来有很多其他人在看这个问题，不会费心点击链接来获得答案。在此处添加一些详细信息，我会为您的答案 +1。

【解决方案2】：

这将完成你的工作

  textarea{
        resize:none;
    }

【讨论】：

【解决方案3】：

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

对于 IE 和 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

【讨论】：

【解决方案4】：

只有一个额外的选项，如果您想恢复应用程序中所有文本区域的默认行为，您可以在 CSS 中添加以下内容：

textarea:not([resize="true"]) {
  resize: none !important;
}

并执行以下操作以启用您想要调整大小的位置：

<textarea resize="true"></textarea>

请记住，此解决方案可能不适用于您可能想要支持的所有浏览器。您可以在此处查看对resize 的支持列表：http://caniuse.com/#feat=css-resize

【讨论】：

【解决方案5】：

这对我有用

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>

【讨论】：

【解决方案6】：

根据问题，我已在 javascript

中列出了答案

通过选择标记名

document.getElementsByTagName('textarea')[0].style.resize = "none";

通过选择 ID

document.getElementById('textArea').style.resize = "none";

【讨论】：

【解决方案7】：

只需使用html的可拖动属性就可以轻松完成

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

默认值为真。

【讨论】：

问题是关于调整文本区域的大小，而不是拖放。因此，正如预期的那样，在 textarea 上设置此属性并不能在 Chrome 中发挥作用（至少）。

【解决方案8】：

//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

以上代码适用于大多数浏览器

//HTML:
<textarea id='textarea' draggable='false'></textarea>

为它在最大数量的浏览器上工作而做这两件事

【讨论】：