HTML 属性：readonly

布尔 readonly 属性（如果存在）使元素不可变，这意味着用户无法编辑控件。

¥The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.

Try it

概述

¥Overview

如果在输入元素上指定了 readonly 属性，则由于用户无法编辑输入，因此该元素不参与约束验证。

¥If the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.

text、search、url、tel、email、password、date、month、week、time、datetime-local 和 number <input> 类型以及 <textarea> 表单控制元素支持 readonly 属性。如果出现在任何这些输入类型和元素上，则 :read-only 伪类将匹配。如果不包含该属性，则 :read-write 伪类将匹配。

¥The readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number <input> types and the <textarea> form control elements. If present on any of these input types and elements, the :read-only pseudo class will match. If the attribute is not included, the :read-write pseudo class will match.

该属性不受支持或与 <select> 或已经不可变的输入类型（例如 checkbox 和 radio）相关，或者根据定义不能以值开头（例如 file 输入类型）。range 和 color，因为两者都有默认值。hidden 也不支持它，因为不能期望用户填写隐藏的表单。任何按钮类型（包括 image）也不支持它。

¥The attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image.

注意：只有文本控件可以设置为只读，因为对于其他控件（例如复选框和按钮），只读和禁用之间没有有用的区别，因此 readonly 属性不适用。

¥Note: Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.

当输入具有 readonly 属性时，:read-only 伪类也适用于它。相反，支持 readonly 属性但没有与 :read-write 伪类匹配的属性集的输入。

¥When an input has the readonly attribute, the :read-only pseudo-class also applies to it. Conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class.

属性交互

¥Attribute interactions

disabled 和 readonly 之间的区别在于，只读控件仍然可以运行并且仍然可以获得焦点，而禁用的控件无法接收焦点并且不会随表单一起提交，并且在启用之前通常不会充当控件。

¥The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

由于只读字段无法通过用户交互更改其值，因此 required 对同时指定了 readonly 属性的输入没有任何影响。

¥Because a read-only field cannot have its value changed by a user interaction, required does not have any effect on inputs with the readonly attribute also specified.

动态修改只读属性值的唯一方法是通过脚本。

¥The only way to modify dynamically the value of the readonly attribute is through a script.

注意：指定了 readonly 属性的输入上不允许使用 required 属性。

¥Note: The required attribute is not permitted on inputs with the readonly attribute specified.

可用性

¥Usability

浏览器显示 readonly 属性。

¥Browsers display the readonly attribute.

约束验证

¥Constraint validation

如果该元素是只读的，则该元素的值不能由用户更新，并且不参与约束验证。

¥If the element is read-only, then the element's value can not be updated by the user, and does not participate in constraint validation.

示例

¥Example

HTML

html
<div class="group">
  <input type="text" value="Some value" readonly="readonly" id="text" />
  <label for="text">Text box</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" id="email" />
  <label for="email">Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" id="pwd" />
  <label for="pwd">Password</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Some value</textarea>
  <label for="ta">Message</label>
</div>

结果

¥Result

规范

Specification
HTML Standard
# attr-input-readonly
HTML Standard
# attr-textarea-readonly

¥Specifications

浏览器兼容性

¥Browser compatibility

html.elements.input.readonly

BCD tables only load in the browser

html.elements.textarea.readonly

BCD tables only load in the browser

也可以看看

¥See also