From a02245ee69bc4321e77146a3a50447f6be5542e9 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 28 Dec 2023 11:37:24 +0800 Subject: [PATCH 1/6] [zh-cn] init translation of html attribute readonly --- .../web/html/attributes/readonly/index.md | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/zh-cn/web/html/attributes/readonly/index.md diff --git a/files/zh-cn/web/html/attributes/readonly/index.md b/files/zh-cn/web/html/attributes/readonly/index.md new file mode 100644 index 00000000000000..ada2c7c9164f2d --- /dev/null +++ b/files/zh-cn/web/html/attributes/readonly/index.md @@ -0,0 +1,87 @@ +--- +title: HTML 属性：readonly +slug: Web/HTML/Attributes/readonly +l10n: + sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff +--- + +{{HTMLSidebar}} + +当 **`readonly`** 布尔属性存在时，元素是不可变的，意味着用户无法编辑控件。 + +{{EmbedInteractiveExample("pages/tabbed/attribute-readonly.html", "tabbed-shorter")}} + +## 概述 + +如果在 input 元素上指定了 `readonly` 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。 + +`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local"、 "datetime-local")}}`、"{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only)}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 + +该属性不支持 `{{HTMLElement("select")}}` 或已不可变的 input 类型，也与之无关，如 {{HTMLElement("input/checkbox", "checkbox")}}、{{HTMLElement("input/radio", "radio")}} 或根据定义不能以值开头的 input 类型，如 {{HTMLElement("input/file", "file")}} input 类型。{{HTMLElement("input/range", "range")}} 和 {{HTMLElement("input/color", "color")}} 都有默认值。{{HTMLElement("input/hidden", "hidden")}} input 类型也不支持该功能，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。 + +> **备注：** 只有文本控件可以设置为只读，因为对于其他控件（如复选框和按钮）来说，只读和禁用之间没有任何有用的区别，所以 `readonly` 属性并不适用。 + +当输入具有 `readonly` 属性时，{{cssxref(":read-only")}} 伪类也适用于该输入。反之，支持 `readonly` 属性但未设置该属性的输入将匹配 {{cssxref(":read-write")}} 伪类。 + +### 属性交互 + +[`disabled`](/zh-CN/docs/Web/HTML/Attributes/disabled) 与 `readonly` 的区别在于，只读控件仍可发挥作用，仍可被聚焦，而禁用控件不能接收聚焦，不能随表单提交，一般在启用前不能作为控件发挥作用。 + +由于只读字段不能通过用户交互改变其值，因此 [`required`](/zh-CN/docs/Web/HTML/Attributes/required) 对同时指定了 `readonly` 属性的输入没有任何影响。 + +动态修改只读属性值的唯一方法是通过脚本。 + +> **备注：** `required` 属性不可以在指定了 `readonly` 属性上的 input 控件上使用。 + +### 可用性 + +浏览器会显示 `readonly` 属性。 + +### 约束验证 + +如果元素是只读的，则用户不能更新该元素的值，元素的值也不参与约束验证。 + +## 示例 + +### HTML + +```html +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+``` + +### 结果 + +{{EmbedLiveSample('示例')}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref(':read-only')}} 和 {{cssxref(':read-write')}} 伪类 +- {{htmlelement('input')}} +- {{htmlelement('select')}} From 4fea5bbe93f13c20c0864dbc01f70d53f2bcf4e6 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 28 Dec 2023 11:39:13 +0800 Subject: [PATCH 2/6] Update files/zh-cn/web/html/attributes/readonly/index.md --- files/zh-cn/web/html/attributes/readonly/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/html/attributes/readonly/index.md b/files/zh-cn/web/html/attributes/readonly/index.md index ada2c7c9164f2d..d6ba36c5f0c7c8 100644 --- a/files/zh-cn/web/html/attributes/readonly/index.md +++ b/files/zh-cn/web/html/attributes/readonly/index.md @@ -15,7 +15,7 @@ l10n: 如果在 input 元素上指定了 `readonly` 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。 -`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local"、 "datetime-local")}}`、"{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only)}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 +`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local"、 "datetime-local")}}`、`{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only)}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 该属性不支持 `{{HTMLElement("select")}}` 或已不可变的 input 类型，也与之无关，如 {{HTMLElement("input/checkbox", "checkbox")}}、{{HTMLElement("input/radio", "radio")}} 或根据定义不能以值开头的 input 类型，如 {{HTMLElement("input/file", "file")}} input 类型。{{HTMLElement("input/range", "range")}} 和 {{HTMLElement("input/color", "color")}} 都有默认值。{{HTMLElement("input/hidden", "hidden")}} input 类型也不支持该功能，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。 From b585ba739f1cbd4043e03fac38c4b5fb0f9390ff Mon Sep 17 00:00:00 2001 From: A1lo Date: Thu, 28 Dec 2023 11:51:36 +0800 Subject: [PATCH 3/6] Update files/zh-cn/web/html/attributes/readonly/index.md --- files/zh-cn/web/html/attributes/readonly/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/html/attributes/readonly/index.md b/files/zh-cn/web/html/attributes/readonly/index.md index d6ba36c5f0c7c8..490f674d9ca9da 100644 --- a/files/zh-cn/web/html/attributes/readonly/index.md +++ b/files/zh-cn/web/html/attributes/readonly/index.md @@ -15,7 +15,7 @@ l10n: 如果在 input 元素上指定了 `readonly` 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。 -`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local"、 "datetime-local")}}`、`{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only)}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 +`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local", "datetime-local")}}`、`{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only)}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 该属性不支持 `{{HTMLElement("select")}}` 或已不可变的 input 类型，也与之无关，如 {{HTMLElement("input/checkbox", "checkbox")}}、{{HTMLElement("input/radio", "radio")}} 或根据定义不能以值开头的 input 类型，如 {{HTMLElement("input/file", "file")}} input 类型。{{HTMLElement("input/range", "range")}} 和 {{HTMLElement("input/color", "color")}} 都有默认值。{{HTMLElement("input/hidden", "hidden")}} input 类型也不支持该功能，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。 From 17438af25d8f2d6b9f7eb208d39d92c956ba42b7 Mon Sep 17 00:00:00 2001 From: A1lo Date: Thu, 28 Dec 2023 11:53:39 +0800 Subject: [PATCH 4/6] Apply suggestions from code review --- files/zh-cn/web/html/attributes/readonly/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/html/attributes/readonly/index.md b/files/zh-cn/web/html/attributes/readonly/index.md index 490f674d9ca9da..349460f951048a 100644 --- a/files/zh-cn/web/html/attributes/readonly/index.md +++ b/files/zh-cn/web/html/attributes/readonly/index.md @@ -15,7 +15,7 @@ l10n: 如果在 input 元素上指定了 `readonly` 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。 -`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local", "datetime-local")}}`、`{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only)}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 +`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local", "datetime-local")}}`、`{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only')}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 该属性不支持 `{{HTMLElement("select")}}` 或已不可变的 input 类型，也与之无关，如 {{HTMLElement("input/checkbox", "checkbox")}}、{{HTMLElement("input/radio", "radio")}} 或根据定义不能以值开头的 input 类型，如 {{HTMLElement("input/file", "file")}} input 类型。{{HTMLElement("input/range", "range")}} 和 {{HTMLElement("input/color", "color")}} 都有默认值。{{HTMLElement("input/hidden", "hidden")}} input 类型也不支持该功能，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。 From bf78a0c73239fa8741040e63dc2b11e36355c945 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 28 Dec 2023 16:16:29 +0800 Subject: [PATCH 5/6] Apply suggestions from code review Co-authored-by: A1lo --- files/zh-cn/web/html/attributes/readonly/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/html/attributes/readonly/index.md b/files/zh-cn/web/html/attributes/readonly/index.md index 349460f951048a..67fc1a53d953a8 100644 --- a/files/zh-cn/web/html/attributes/readonly/index.md +++ b/files/zh-cn/web/html/attributes/readonly/index.md @@ -15,9 +15,9 @@ l10n: 如果在 input 元素上指定了 `readonly` 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。 -`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local", "datetime-local")}}`、`{{HTMLElement("input/number", "number")}}` 这些 `{{HTMLElement("input")}}` 类型和 `{{HTMLElement("textarea")}}` 表单控制元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `{{cssxref(':read-only')}}` 伪类。如果不包含该属性，则将匹配 `{{cssxref(':read-write')}}` 伪类。 +`{{HTMLElement("input/text", "text")}}`、`{{HTMLElement("input/search", "search")}}`、`{{HTMLElement("input/url", "url")}}`、`{{HTMLElement("input/tel", "tel")}}`、`{{HTMLElement("input/email", "email")}}`、`{{HTMLElement("input/password", "password")}}`、`{{HTMLElement("input/date", "date")}}`、`{{HTMLElement("input/month", "month")}}`、`{{HTMLElement("input/week", "week")}}`、`{{HTMLElement("input/time", "time")}}`、`{{HTMLElement("input/datetime-local", "datetime-local")}}`、`{{HTMLElement("input/number", "number")}}` 这些 {{HTMLElement("input")}} 类型和 {{HTMLElement("textarea")}} 表单控件元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 {{cssxref(':read-only')}} 伪类。如果不包含该属性，则将匹配 {{cssxref(':read-write')}} 伪类。 -该属性不支持 `{{HTMLElement("select")}}` 或已不可变的 input 类型，也与之无关，如 {{HTMLElement("input/checkbox", "checkbox")}}、{{HTMLElement("input/radio", "radio")}} 或根据定义不能以值开头的 input 类型，如 {{HTMLElement("input/file", "file")}} input 类型。{{HTMLElement("input/range", "range")}} 和 {{HTMLElement("input/color", "color")}} 都有默认值。{{HTMLElement("input/hidden", "hidden")}} input 类型也不支持该功能，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。 +该属性不支持 {{HTMLElement("select")}} 或已不可变的 input 类型，也与之无关，如 `{{HTMLElement("input/checkbox", "checkbox")}}`、`{{HTMLElement("input/radio", "radio")}}` 或根据定义不能以值开头的 input 类型，如 `{{HTMLElement("input/file", "file")}}` input 类型。`{{HTMLElement("input/range", "range")}}` 和 `{{HTMLElement("input/color", "color")}}` 都有默认值。`{{HTMLElement("input/hidden", "hidden")}}` input 类型也不支持该属性，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。 > **备注：** 只有文本控件可以设置为只读，因为对于其他控件（如复选框和按钮）来说，只读和禁用之间没有任何有用的区别，所以 `readonly` 属性并不适用。 From 7a5b4df8d36e3b04500b8c54b870795c55963075 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 28 Dec 2023 16:19:25 +0800 Subject: [PATCH 6/6] update source commit --- files/zh-cn/web/html/attributes/readonly/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/html/attributes/readonly/index.md b/files/zh-cn/web/html/attributes/readonly/index.md index 67fc1a53d953a8..1e74c7cd1d1ae2 100644 --- a/files/zh-cn/web/html/attributes/readonly/index.md +++ b/files/zh-cn/web/html/attributes/readonly/index.md @@ -2,7 +2,7 @@ title: HTML 属性：readonly slug: Web/HTML/Attributes/readonly l10n: - sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff + sourceCommit: b1699bac6bc35d0958734ff5e982f5f35974f448 --- {{HTMLSidebar}}