HTMLTextAreaElement

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

HTMLTextAreaElement 接口提供了用于操作 <textarea> 元素的布局和显示属性与方法。

实例属性

它还继承了其父接口 HTMLElement 的属性。

autocomplete: 一个字符串，表示元素的 autocomplete 属性。
cols: 一个数字，表示元素的 cols 属性，指示文本区域的可见宽度。
defaultValue: 一个字符串，表示控件的默认值，其行为类似于 Node.textContent 属性。
dirName: 一个字符串，表示元素的文本方向。
disabled: 一个布尔值，表示元素的 disabled 属性，指示控件不可交互。
form 只读: 返回对父级表单元素的引用。如果此元素不包含在表单元素中，则它可以是同一文档中任何 <form> 元素的 id 属性，或者值为 null。
labels 只读: 返回与此元素关联的 <label> 元素的 NodeList。
maxLength: 一个数字，表示元素的 maxlength 属性，指示用户可以输入的字符的最大数量。此约束仅在值更改时进行评估。
minLength: 一个数字，表示元素的 minlength 属性，指示用户可以输入的字符的最小数量。此约束仅在值更改时进行评估。
name: 一个字符串，表示元素的 name 属性，包含控件的名称。
placeholder: 一个字符串，表示元素的 placeholder 属性，包含提示用户在控件中输入什么的文本。
readOnly: 一个布尔值，表示元素的 readonly 属性，指示用户无法修改控件的值。
required: 一个布尔值，表示元素的 required 属性，指示用户在提交表单之前必须指定一个值。
rows: 一个数字，表示元素的 rows 属性，指示控件的可见文本行数。
selectionDirection: 一个字符串，表示文本选择发生的文本方向。如果选择是按当前区域设置的从开始到结束的方向进行的，则为 forward；反之则为 backward。如果方向未知，则也可以是 none。
selectionEnd: 一个数字，表示选定文本的结束索引。如果没有选择文本，则包含紧跟输入光标的字符的索引。在设置时，控件的行为如同调用了 setSelectionRange()，并将此值作为第二个参数，将 selectionStart 作为第一个参数。
selectionStart: 一个数字，表示选定文本的开始索引。如果没有选择文本，则包含紧跟输入光标的字符的索引。在设置时，控件的行为如同调用了 setSelectionRange()，并将此值作为第一个参数，将 selectionEnd 作为第二个参数。
textLength 只读: 返回控件 value 的码点长度。与读取 value.length 相同。
type 只读: 返回字符串 textarea。
validationMessage 只读: 返回一个本地化的消息，描述控件不满足的验证约束（如果有）。如果控件不是约束验证的候选者（willValidate 为 false），或者它满足其约束，则此消息为空字符串。
validity 只读: 返回此元素所处的有效性状态。
value: 一个字符串，表示控件中包含的原始值。
willValidate 只读: 返回该元素是否是约束验证的候选者。如果任何条件阻止其进行约束验证，包括其 readOnly 或 disabled 属性为 true，则返回 false。如果该控件不是约束验证的候选者，或者它满足其约束，则返回 true。
wrap: 一个字符串，表示元素的 wrap 属性，指示控件如何换行文本。

实例方法

它还继承了其父接口 HTMLElement 的方法。

checkValidity(): 如果元素是约束验证的候选者但未满足其约束，则返回 false。在这种情况下，它还会向控件触发一个可取消的 invalid 事件。如果该控件不是约束验证的候选者，或者它满足其约束，则返回 true。
reportValidity(): 此方法向用户报告元素上的约束问题（如果有）。如果存在问题，它会向元素触发一个可取消的 invalid 事件，并返回 false；如果没有问题，则返回 true。
select(): 选择控件中的内容。
setCustomValidity(): 为元素设置自定义有效性消息。如果此消息不是空字符串，则元素存在自定义有效性错误，并且不进行验证。
setRangeText(): 用新文本替换元素中的一段文本。
setSelectionRange(): 选择元素中的一段文本（但不会使其获得焦点）。

事件

它还继承了其父接口 HTMLElement 的事件。

使用 addEventListener() 或将事件监听器分配给此接口的 oneventname 属性来监听这些事件

select 事件: 当选择了一些文本时触发。
selectionchange 事件: 当 <textarea> 元素中的文本选择发生更改时触发。

示例

自动生长文本区域示例

键入时使文本区域自动生长

JavaScript

function autoGrow(field) {
  if (field.scrollHeight > field.clientHeight) {
    field.style.height = `${field.scrollHeight}px`;
  }
}

document.querySelector("textarea").addEventListener("keyup", (e) => {
  autoGrow(e.target);
});

CSS

css

textarea.no-scrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

HTML

html

<form>
  <fieldset>
    <legend>Your comments</legend>
    <p><textarea class="no-scrollbars"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>

插入 HTML 标签示例

在文本区域中插入一些 HTML 标签

function insert(startTag, endTag) {
  const textArea = document.myForm.myTextArea;
  const start = textArea.selectionStart;
  const end = textArea.selectionEnd;
  const oldText = textArea.value;

  const prefix = oldText.substring(0, start);
  const inserted = startTag + oldText.substring(start, end) + endTag;
  const suffix = oldText.substring(end);

  textArea.value = `${prefix}${inserted}${suffix}`;

  const newStart = start + startTag.length;
  const newEnd = end + startTag.length;

  textArea.setSelectionRange(newStart, newEnd);
  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Enter the full URL for the link");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTextArea.focus();
  }
}

const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");

strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
em.addEventListener("click", (e) => insert("<em>", "</em>"));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("<code>", "</code>"));

将 span 装饰成类似链接的行为

css

.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

html

<form name="myForm">
  <p>
    [
    <span class="intLink" id="format-strong"><strong>Bold</strong></span> |
    <span class="intLink" id="format-em"><em>Italic</em></span> |
    <span class="intLink" id="format-link">URL</span> |
    <span class="intLink" id="format-code">code</span> ]
  </p>

  <p>
    <textarea name="myTextArea" rows="10" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. 
    </textarea>
  </p>
</form>

规范

规范
HTML # htmltextareaelement

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月8日⁩，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的某个问题