在网页开发中，<textarea> 元素用于创建多行的文本输入框，通常用于用户输入大段文本的场景。在某些情况下，我们希望展示一段只读文本，用户无法编辑。这时就可以使用 <textarea> 元素的 readonly 属性。
什么是 readonly 属性
readonly 是一个布尔属性，当设置为 true 时，表示该 <textarea> 元素是只读的，用户无法编辑其中的内容。这个属性可以通过 HTML 属性或者 JavaScript 动态设置。
如何使用 readonly 属性
要在 <textarea> 元素中使用 readonly 属性，只需在该元素中添加 readonly 属性即可。示例如下：
<textarea readonly>This is a readonly textarea.</textarea>
在上面的示例中，用户无法编辑 <textarea> 中的文本内容，只能查看。
动态设置 readonly 属性
除了在 HTML 中设置 readonly 属性外，我们还可以使用 JavaScript 动态设置 <textarea> 的 readonly 属性。示例如下：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- -------------------- -- - -------------------- ------- ----------------------------- ----------------- -------- -------- -------------- - --- -------- - -------------------------------------- ----------------- - ----- - --------- ------- -------
在上面的示例中，点击按钮后，<textarea> 将变为只读状态。
注意事项
readonly属性仅仅是禁止用户编辑文本内容，并不会禁止用户复制文本内容。- 要禁用用户复制文本内容，可以考虑使用 CSS 样式
user-select: none;。
总结
通过使用 <textarea> 元素的 readonly 属性，我们可以很方便地创建只读的文本展示区域，提升用户体验。在实际项目中，根据需求合理使用 readonly 属性，可以为用户带来更好的交互体验。