如何停用 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 的可調整大小的屬性？