在日常的开发中，我们经常会用到文本框来输入一些内容，其中最常用、最基础的文本框就是textarea了。不过有时候我们需要将这个文本框设置为只读状态，这样用户就不能通过键盘输入数据，但是可以浏览文本框中的内容。那么，怎么设置textarea为只读状态呢？下面我们就来详细介绍一下。

一、在标签中设置readonly属性

textarea标签中有一个名为“readonly”的属性，当这个属性被设置为“readonly”时，文本框将变为只读状态。代码如下：

```html

这里是只读文本框的内容

```

这样设置后，用户仍然可以进行滚动、选中和复制文本框中的内容，但是不能使用键盘输入。

二、通过JavaScript设置readonly属性

我们也可以使用JavaScript来动态的改变文本框的属性，从而达到只读的效果。如下是设置方法：

``` js

```

这样用户也不能通过键盘输入数据，但是可以浏览文本框中的内容。

三、通过CSS设置

除了可以通过改变属性，我们也可以使用CSS样式来改变textarea的只读状态。CSS3中引入了属性选择器[attribute]，可以在CSS样式表中选择设置了属性的元素，并为其添加样式。这样在渲染浏览器端的HTML时，通过CSS匹配只读的textarea，就可以达到只读的效果。

``` css

textarea[readonly]{

background-color: #EEEEEE; //只读状态下文本框的背景颜色

color: #666666; //只读状态下文本框中字体的颜色

border: 1px solid #CCCCCC; //只读状态框框的颜色

}

```

使用CSS设置只读状态可以给网页带来更好的可访问性，即使JavaScript不能正常工作，用户仍然可以看到消息。

注：以上三种方式都可以将textarea设置为只读状态，由于属性、JavaScript和CSS的使用范围不同，建议根据实际开发情况进行选择。

四、总结

以上是设置textarea为只读状态的三种方法，分别是设置属性、使用JavaScript和CSS。我们可以根据实际情况来选择使用哪一种方法。

此外，只读状态的文本框我们还可以进一步设置为“不可编辑”，代码如下：

``` html

这里是只读且不可编辑的文本框

```

只读状态但可编辑，即仅仅防止输入，仍然可滚动和复制内容。而二者的区别在于：只读状态的文本框无法响应鼠标事件，不可进行选择、复制和拖拽。而不可编辑的文本框是可以响应鼠标事件，可以选择和复制文本。