HTML - readonly 属性_HTML 菜鸟教程

HTML readonly 属性用于指定输入或 textarea 字段只能读取，用户不能修改它。

如果输入字段或 textarea 字段是只读字段，则表示用户无法更改或修改控件，但是，用户可以突出显示该控件并从字段中复制文本。

readonly 属性，用于限制用户在满足特定条件（例如选中复选框）之前更改字段的值。随后，JavaScript 可以删除 readonly 属性，使用户能够编辑输入字段。

语法


<tag readonly></tag>

适用于

下面列出的元素允许使用 HTML readonly 属性

元素	描述
<input>	HTML <input> 标签用于接收来自用户的各种类型的输入。
<textarea>	HTML <textarea> 标签用于表示多行纯文本编辑控件。

HTML readonly 属性的示例

以下示例将说明 HTML poster 属性，我们应该在何处以及如何使用此属性！

<input>标签的 Readonly 属性

在以下示例中，我们在 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 属性

考虑到另一种情况，我们将使用 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>

运行<script >以删除 readonly 属性

以下示例，我们将 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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - poster 属性 HTML - rel 属性 >>