HTML - 只讀屬性

HTML 的readonly屬性用於指定輸入或文字區域欄位只能讀取，使用者無法修改。

如果輸入或文字區域欄位是隻讀欄位，則表示使用者無法更改或修改控制元件，但是，使用者可以突出顯示它並從欄位中複製文字。

readonly 屬性用於限制使用者更改欄位的值，直到滿足某些條件，例如選中複選框。隨後，JavaScript 可以刪除 readonly 屬性，允許使用者編輯輸入欄位。

語法

應用於

以下列出的元素允許使用 HTML readonly 屬性

元素	描述
<input>	HTML <input> 標籤用於接受使用者各種型別的輸入。
<textarea>	HTML <textarea> 標籤用於表示多行純文字編輯控制元件。

HTML readonly 屬性示例

以下示例將說明 HTML poster 屬性，以及我們應該在哪裡以及如何使用此屬性！

輸入標籤的只讀屬性

在以下示例中，我們在 input(type =’text’) 元素中使用 HTML 的 'readonly' 屬性，使欄位不可變，以便使用者無法編輯它。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML readonly attribute</title>
</head>

<body>
   <p>HTML 'readonly' attribute</p>
   <form>
      <label>Name</label>
      <input type="text" 
             value="ABC" 
             readonly>
   </form>
</body>

</html>

textarea 標籤的只讀屬性

考慮另一種情況，我們將使用 readonly 屬性與 textarea 元素一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML readonly attribute</title>
</head>

<body>
   <p>HTML 'readonly' attribute</p>
   <form>
      <label>Feedback</label>
      <br>
      <textarea cols="40" 
                rows="10" 
                readonly>
      </textarea>
   </form>
</body>

</html>

執行指令碼以刪除只讀屬性

以下是一個示例，我們使用 HTML 的 'readonly' 屬性（屬性）與 JavaScript 一起設定/刪除輸入欄位的 'readonly' 屬性，並且我們使用單獨的 JavaScript 函式來設定和刪除該屬性。

<!DOCTYPE html>
<html lang="en">

<head>
<title>Readonly Attribute Example</title>
<script>
   function enableInput() {
      var checkbox = document.getElementById("checkbox");
      var inputField = document.getElementById("input");

      if (checkbox.checked) {
            inputField.removeAttribute("readonly");
      } else {
            inputField.setAttribute("readonly", true);
      }
   }
</script>
</head>

<body>
   Enable Input Field:
   <input type="checkbox" 
            id="checkbox" 
            onchange="enableInput()">
   <br><br>
   Input:
   <input type="text" 
            id="input" 
            placeholder="Name" 
            readonly>
</body>

</html>

支援的瀏覽器

屬性
readonly	是	是	是	是	是

html_attributes_reference.htm

列印頁面