HTMLTextAreaElement

基线广泛可用

此功能已十分成熟，并在许多设备和浏览器版本上运行良好。它自以下日期起在所有浏览器中都可用 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 属性，包含控件的名称。
placeholder: 一个字符串，表示元素的 placeholder 属性，包含关于用户在控件中输入什么内容的提示。
readOnly: 一个布尔值，表示元素的 readonly 属性，指示用户无法修改控件的值。
required: 一个布尔值，表示元素的 required 属性，指示用户必须在提交表单之前指定一个值。
rows: 一个数字，表示元素的 rows 属性，指示控件的可见文本行数。
selectionDirection: 一个字符串，表示选择发生的 direction。如果选择是在当前语言环境的开始到结束方向进行的，则为 forward；对于相反方向，则为 backward。如果方向未知，它也可以是 none。
selectionEnd: 一个数字，表示所选文本的结束索引。如果未选择任何文本，则它包含输入光标后字符的索引。在设置时，控件的行为就像使用此作为第二个参数和 selectionStart 作为第一个参数调用 setSelectionRange() 一样。
selectionStart: 一个数字，表示所选文本的开始索引。如果未选择任何文本，则它包含输入光标后字符的索引。在设置时，控件的行为就像使用此作为第一个参数和 selectionEnd 作为第二个参数调用 setSelectionRange() 一样。
textLength 只读: 返回控件 value 的代码点长度。与读取 value.length 相同。
type 只读: 返回字符串 textarea。
validationMessage 只读: 返回一个本地化消息，描述控件不满足的验证约束（如果有）。如果控件不是约束验证的候选对象（willValidate 为 false），或者它满足其约束，则此消息为空字符串。
validity 只读: 返回此元素所处的有效性状态。
值: 一个字符串，表示控件中包含的原始值。
willValidate 只读: 返回元素是否为约束验证的候选对象。如果任何条件阻止其进行约束验证（包括其 readOnly 或 disabled 属性为 true），则为 false。
wrap: 一个字符串，表示元素的 wrap 属性，指示控件如何换行文本。

实例方法

还从其父接口 HTMLElement 继承方法。

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

事件

也继承了其父接口的事件，HTMLElement。

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

select 事件: 当一些文本被选中时触发。
selectionchange 事件实验性: 当 <textarea> 元素中的文本选择发生改变时触发。

示例

自动增长的 textarea 示例

使 textarea 在输入时自动增长

JavaScript

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

CSS

css

textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

HTML

html

<form>
  <fieldset>
    <legend>Your comments</legend>
    <p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>

插入 HTML 标签示例

在 textarea 中插入一些 HTML 标签。

JavaScript

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

  const prefix = oldText.substring(0, selectionStart);
  const inserted =
    startTag + oldText.substring(selectionStart, selectionEnd) + endTag;
  const suffix = oldText.substring(selectionEnd);
  textArea.value = `${prefix}${inserted}${suffix}`;

  const newSelectionStart = selectionStart + startTag.length;
  const newSelectionEnd = selectionEnd + startTag.length;
  textArea.setSelectionRange(newSelectionStart, newSelectionEnd);

  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Enter the full URL for the link");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTxtArea.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("\n<code>\n", "\n</code>\n"));

CSS

CSS 用于装饰内部 span 使其表现得像链接

css

.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: #0000ff;
}

HTML

html

<form name="myForm">
  <p>
    [&nbsp;
    <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> &nbsp;]
  </p>

  <p>
    <textarea name="myTxtArea" 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. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.
    </textarea>
  </p>
</form>

规范

规范
HTML 标准 # htmltextareaelement

浏览器兼容性

BCD 表格仅在浏览器中加载