随着互联网的普及，Web 应用程序越来越普遍，如何确保用户体验和数据的安全性成了开发者们需要掌握的重要技能之一。尤其是在一些关键性的业务场景中，防止用户反复修改数据就显得尤为重要。在这篇文章中，我们会通过示例演示如何设置 textarea 只读，以防止用户编辑输入内容，从而保障应用程序的安全性。

## 什么是 textarea？

HTML 中的 textarea 标签定义了一个多行文本输入控件，通常用于收集用户输入的文字内容，如评论、留言、邮件内容等。与 input 标签不同的是，textarea 可以提供更多的文本输入空间，让用户更加方便地编辑和阅读较长的文本。

textarea 标签有如下特点：

- 它是多行输入框，可以容纳大量文本；

- 可以设置文本框的显示行数 与 字符数；

- 支持回车换行；

## 为什么要设置 textarea 只读？

在实际开发过程中， 如果数据是由用户编辑的， 可能存在一些安全风险和数据不同步等问题， 因此， 在需要固化数据的场景中，开发者一般会将数据保存在后端，然后在前端以有效的方式呈现数据，而不是让用户直接操作数据。

如果在这样的业务场景中，我们不将前端的 textarea 设置为只读状态，用户就可能会随意修改甚至删除其中的内容，从而破坏了在后台已保存的数据。此外，即便用户并不恶意修改数据，但由于用户多次编辑可能会导致数据不同步，因此将 textarea 设置为只读状态对于确保数据的准确性和一致性也非常重要。

## 在 HTML5 中如何设置 textarea 只读

在 HTML5 中，只需要给 textarea 元素添加一个 readonly 属性就可以实现输入控件只读。下面是一个设置文本框只读的示例：

```

文本框内容

```

这里需要注意的是，只有在 textarea 元素上添加了 readonly 属性才能实现输入控件只读，如果在 CSS 中设置 textarea 的样式是“只读”，那么样式不会直接阻止用户的编辑操作。

## 使用 JavaScript 设置 textarea 只读

在 JavaScript 中，我们可以通过设置 textarea 的 disabled 属性或者 readonly 属性来实现只读控件的效果。disabled 属性是指选定元素的禁用状态，而readonly 属性则表示该元素为只读状态。通过 JavaScript 设定 textarea 元素的只读与否，可以给更多的 JavaScript 特性赋予更好的控制权。

- disabled 属性

下面是一个用 JavaScript 设置 textarea 为只读状态的实例，该实例通过 disabled 属性设置了输入框为只读状态，其禁止了用户编辑输入内容：

```

文本框内容

设置为只读

```

- readonly 属性

下面是用 JavaScript 设置 textarea 为只读状态的实例，该实例通过设置 readonly 属性让输入框呈现只读状态，从而防止用户编辑输入内容：

```

文本框内容

设置为只读

```

通过上面两个示例，我们可以看到 JavaScript 设置 textarea 的只读效果比HTML5 设置更加灵活，因为我们可以对输入控件使用 JavaScript 其他特性进行更多的控制。

## 总结

textarea 元素是 Web 界面开发中使用频繁的多行输入框，它的使用场景很多，如输入评论、编辑邮件正文等。但是有些操作场景下， 需要保证输入控件的数据是不可被编辑的， 那么这时我们就需要设置 textarea 元素为只读状态，以确保数据安全性和一致性。通过 HTML5 和 JavaScript 都可以实现输入控件的只读状态。我们可以根据实际开发场景选择设置 textarea 只读。