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

打印页面