HTML readonly 属性

HTML readonly 语法

在 HTML 中，readonly 属性用于定义文本框是否为只读的，它只能用于以下 2 种元素。

语法：

<input type="text" readonly>

<textarea readonly><textarea>

说明：

readonly 是一个布尔属性。在 HTML5 标准中，下面 2 种写法是等价的。

<!--写法1-->
<element readonly>

<!--写法2-->
<element readonly="readonly">

什么是布尔属性？

布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。这些属性不需要显式赋值（如 true 或 false），只要属性名存在即可。

就拿 required 属性来说：

<input type="text" required>：表示这个文本输入框是 “必填” 的。
<input type="text">：表示这个文本输入框是 “非必填” 的。

对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）

<!--写法1：推荐-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

注意，下面这种写法是错误的。

<!--错误写法-->
<input type="text" required="true">

其中，常见的布尔属性有：

autofocus：页面加载时，元素自动获得焦点。
hidden：是否隐藏元素。
checked：是否选中，用于单选按钮和复选框。
disabled：是否禁用。
readonly：是否只读。
required：是否必填，用于 input、textarea 和 select 元素。
selected：是否选中，用于 option 元素。
multiple：是允许多选，用于 input 和 select 元素。
novalidate：是否跳过内置的验证功能，用于 form 元素。
autoplay：是否自动播放，用于 audio 和 video 元素。
loop：是否循环播放，用于 audio 和 video 元素。

HTML readonly 摘要

适用元素	input、textarea
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML readonly 示例

接下来，我们通过一个简单的例子来讲解一下 HTML readonly 属性是如何使用的。

示例：readonly 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text"><br>
    <input type="text" readonly>
</body>
</html>

页面效果如下图所示。

HTML readonly属性示例效果1

分析：

在这个例子中，我们为第 2 个 input 元素设置了 readonly 属性。从默认效果来看，两个 input 元素是没有任何区别。但当我们尝试输入内容时，会发现第 2 个 input 元素是无法输入的（即处于只读状态），如下图所示。

HTML readonly属性示例效果2

可能有些小伙伴会问：“怎么把 readonly 的输入框的背景变成灰色呢？”实际上，我们可以使用 CSS 的 :read-only 伪类专门设置只读表单的样式，比如：

input:read-only { 
    background-color: #f0f0f0;
}

disabled vs readonly

disabled 和 readonly 这两个属性非常相似，但它们之间是存在本质上的区别的：

disabled（禁用）：元素完全不可用（无法点击或聚焦），且在提交表单时不会发送该元素的值。
readonly（只读）：元素内容不可修改但可以选中复制（可以聚焦），且在提交表单时会正常发送该元素的值。