如何使用 CSS 停用 textarea 的可調整大小屬性?


在 CSS 中,我們可以使用‘resize’ 屬性來調整網頁 textarea 框的大小。我們可以調整 textarea 框的高度和寬度。如果我們將 resize 值設定為 none,則 textarea 框將無法調整大小。

在某些情況下,如果我們希望限制使用者互動並控制輸入的佈局,則可能需要停用 HTML 中文字框區域的可調整大小功能。文字輸入的大小對於網頁或應用程式的設計和佈局也很重要。

在本文中,我們將建立一個 CSS 程式碼來停用文字區域的可調整大小屬性。

可調整大小和不可調整大小的 textarea 框的視覺化表示

語法

<textarea>…write something…</textarea>

此 textarea 元素在輸出中建立框,使用者可以在其中寫入內容。textarea 術語透過在固定字型大小內容納大量字元來定義。文字框可用於表示反饋或評論框。

使用的屬性

示例中使用的屬性如下:

  • color - 定義文字的顏色。

  • font-weight - 定義文字是細體還是粗體。

  • text-align - 定義文字的水平對齊方式。

  • overflow - 根據 overflow 屬性定義元素框的內容溢位。如果元素的內容太大而無法容納在定義的區域內,則此屬性指示是裁剪內容還是新增捲軸。

  • height - 定義 textarea 框的高度。

  • weight - 定義 textarea 框的寬度。

  • resize - 如果值設定為 both,它將調整 textarea 框的高度和寬度。如果值設定為 none,則它將不會調整 textarea 框的大小。

示例

在此示例中,我們將使用內部 CSS 來設計 h1 和 h3 元素。然後,藉助名為 resizable 的 id 類,它設定了 textarea 框的屬性。如果 resize 屬性將值設定為 none,則它將停用 textarea 框。

<!DOCTYPE html>
<html>
<title>Resize the textarea box</title>
<head>
   <style>
      h1,h3{
         color: darkgreen;
         font-weight: bold;
         text-align: center;
      }
      #resizable{
         overflow: auto;
         height: 200px;
         weight: 220px;
         resize: none;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h3><mark>Disable the resizable property of CSS</mark></h3>
   <center>
      <textarea id="resizable">This is real time to learn the technical course</textarea>
   </center>
</body>
</html>

結論

我們在上面的輸出中看到,textarea 框的高度和寬度不可調整大小,因為我們在 resize 屬性中定義了 none 值。有時停用文字框是正確的,因為在構建網站時,提到的空間起著重要作用。

更新於:2023年5月16日

818 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告