HTML中的元素是用于输入多行文本的标准输入控件。它允许用户从键盘中输入自由格式的文本，作为最常见的表单元素之一，<textarea>可以用于各种方案，例如博客评论、留言板、电子邮件消息等。但是，在某些情况下，您可能希望将<textarea>元素设为只读模式，以防止用户编辑它的内容，下面就让我们来看一下如何实现这种设置，以及对<textarea>元素的一些其他设置。</p><p class="title_intro_pic"><img alt="如何在HTML中设置textarea为只读模式？" src="https://qipaikaifa.cn/upload/article/20230510/141007645b353fc820c0aoiei.webp"/></p><i></i><p>1. textarea元素的基本语法</p><p><textarea>元素使用非常简单，只需向其添加行和列属性，以指定应该显示多少行和多少列的文本输入区域。例如，以下代码显示了一个包含4行和30列的<textarea>元素：</p><p>```html</p><p><textarea rows="4" cols="30">

```

显示效果如下：


2. 设定textarea元素只读模式

设定元素为只读模式非常容易，只需要在它的属性列表中设置readonly属性为“readonly”或“true”即可，例如：</p><p>```html</p><p><textarea rows="4" cols="30" readonly>

```

或

```html

```

这两者的效果是一样的，都会使元素变为只读模式，阻止用户对其中的内容进行编辑。仅仅是在<textarea>元素上添加readonly属性，而不需要使用任何JavaScript或其他技术，只要提交表单，用户输入的内容就会被发送到服务器。</p><p>3. 设定textarea元素禁止输入</p><p>有时候您可能希望将<textarea>元素完全禁止输入，而不仅仅是设置为只读模式。这时需要使用disabled属性，这将使<textarea>元素变为不可编辑和不可选中的状态。禁止了输入不仅禁止用户编辑内容，还禁止粘贴、拖放、选中内容到其他地方等相关的动作。以下代码显示了如何将<textarea>元素禁用：</p><p>```html</p><p><textarea rows="4" cols="30" disabled>

```

还可以在元素上使用JavaScript动态设置disabled属性，例如：</p><p>```html</p><p><textarea id="myTextarea" rows="4" cols="30">

```

上面的JavaScript代码使用getElementById()函数获取一个元素，然后将其disabled属性设置为true，就禁用了它。如果要重新启用<textarea>元素，只需将disabled属性设置为false即可。</p><p>4. 设定textarea元素默认值</p><p>除了上面列出的这些基本设置外，还有一些其他的与<textarea>元素相关的设置。例如，可以使用defaultValue属性为<textarea>元素设置默认文本内容。</p><p>```html</p><p><textarea rows="4" cols="30" defaultValue="请输入文本">

```

defaultValue属性的作用是为元素提供默认值。如果用户没有输入任何文本，将使用defaultValue属性指定的文本内容。如果用户在<textarea>元素中输入了一些内容，那么这些内容将覆盖defaultValue属性指定的文本。</p><p>5. 设定textarea元素自动大小调整</p><p>textarea元素是自动换行的，无论用户输入多少文本，都会根据需要自动调整大小。但是，有时候您可能需要更精细的控制，以确保输入区域有一个明确的大小和形状。这时候需要使用CSS和JavaScript进行自定义。</p><p>示例中我们将<textarea>元素的位置设置为相对定位，然后将其放入一个绝对定位的容器中，通过分别设置容器和<textarea>元素的width和height属性，就可以精准地控制输入区域的尺寸了。</p><p>```html</p><p><div style="position:relative; width:400px; height:200px;"></p><p> <textarea style="position:absolute; top:0; left:0; width:100%; height:100%;">