如何禁用 textarea 的可調整大小的屬性？

問題描述

我想禁用 textarea 的可調整大小的屬性。

目前，我可以通過點擊 textarea 的右下角並拖動鼠標來調整 textarea 的大小。如何禁用此功能？

最佳解決方案

以下 CSS 規則禁用 textarea 元素的調整大小行為：

textarea {
    resize: none;
}

要禁用某些（但不是全部）textarea，有幾個選項。

要禁用 name 屬性設置為 foo（即）的特定 textarea：

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

或者使用 id 屬性（即）：

#foo {
    resize: none;
}

W3C 頁面列出了調整大小限制的可能值：none，both，horizontal，vertical 和 inherit：

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

查看一個體面的兼容性頁面，看看目前支持這個功能的瀏覽器。正如 Jon Hulka 所言，使用 max-width，max-height，min-width 和 min-height 可以在 CSS 中進一步限制尺寸。

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 Chris Coyier,
http://css-tricks.com/almanac/properties/r/resize/

次佳解決方案

在 CSS …

textarea {
    resize: none;
}

第三種解決方案

我找到 2 件事情

第一

textarea{resize:none}

這是一個尚未發佈但與 Firefox4 + chrome 和 safari 兼容的 css3

另一個格式功能是溢出：自動擺脱正確的滾動條，考慮到 dir 屬性

代碼和不同的瀏覽器

基本的 html

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

一些瀏覽器

FF 17.0.1

第四種方案

CSS3 有一個新的 UI 元素，將允許您這樣做。該屬性是 resize 屬性。因此，您可以將以下內容添加到樣式表中，以禁止調整所有 textarea 元素的大小：

textarea { resize: none; }

這是一個 CSS3 屬性; 使用兼容性圖表來查看瀏覽器兼容性。

就個人而言，我覺得在 textarea 元素上禁用大小調整非常煩人。這是設計人員試圖向用户客户端”break” 的情況之一。如果您的設計無法容納較大的 textarea，您可能需要重新考慮您的設計如何工作。任何用户都可以將 textarea { resize: both !important; }添加到用户樣式表中，以覆蓋您的首選項。

第五種方案

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

第六種方案

如果你需要深入的支持，你可以使用舊的學校技術

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

第七種方案

這可以在 HTML 中做到容易

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

這對我有用默認值為 true，適用於 draggable 屬性。

參考文獻

How to disable resizable property of textarea?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何禁用 textarea 的可調整大小的屬性？