HTMLTextAreaElement - 表示 <textarea> 元素

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

属性

HTMLTextAreaElement.form 只读

一个 object，返回对父表单元素的引用。如果此元素未包含在表单元素中，则它可以是同一文档中 id 属性同 form 值的 <form> 元素，如果没有，该值为 null 。

HTMLTextAreaElement.type 只读

一个 string，返字符串 textarea。

HTMLTextAreaElement.value

一个 string，返回/设置控件中包含的原始值。

HTMLTextAreaElement.textLength 只读

一个 long，返回控件的 value 值的长度。与调用 value.length 相同。

HTMLTextAreaElement.defaultValue

一个 string，返回/设置控件的默认值，其行为类似于 Node.textContent 属性。

HTMLTextAreaElement.placeholder

一个 string，返回/设置元素的 placeholder 属性，包含用户提示控件中输入内容的提示。

HTMLTextAreaElement.rows

一个 unsigned long，返回/设置元素的 rows 属性，指示控件的可见文本行数。

HTMLTextAreaElement.cols

一个 unsigned long，返回/设置元素的 cols 属性，指示文本区域的可见宽度。

HTMLTextAreaElement.autofocus

一个 boolean，返回/设置元素的 autofocus 属性，指示控件在页面加载时应具有输入焦点。

HTMLTextAreaElement.name

一个 string，返回/设置元素的 name 属性，包含了控件的名称。

HTMLTextAreaElement.disabled

一个 boolean，返回/设置元素的 disabled 属性，表示该控件不可用于交互。

HTMLTextAreaElement.labels 只读

一个 NodeList，返回与此 select 元素关联的标签元素列表。

HTMLTextAreaElement.maxLength

一个 long，返回/设置元素的 maxlength 属性，指示用户可以输入的最大字符数。仅在值更改时才评估此约束。

HTMLTextAreaElement.accessKey

一个 string，返回/设置元素的 accesskey 属性。

HTMLTextAreaElement.readOnly

一个 boolean，返回/设置元素的 readonly 属性，指示用户无法修改控件的值。

HTMLTextAreaElement.required

一个 boolean，返回/设置元素的 required 属性，指示用户必须在提交表单之前指定值。

HTMLTextAreaElement.tabIndex

一个 long，返回/设置当前文档的 Tab 键导航顺序中元素的位置。

HTMLTextAreaElement.selectionStart

一个 unsigned long，返回/设置所选文本开始的索引。如果未选择任何文本，则为光标后面的字符的索引。设置该值时，控件的行为就像调用了 setSelectionRange()，其中使用该元素作为第一个参数 ，并且使用 selectionEnd 作为第二个参数。

HTMLTextAreaElement.selectionEnd

一个 unsigned long，返回/设置所选文本结尾的索引。如果未选择任何文本，则为光标后面的字符的索引。设置该值时，控件的行为就像调用了 setSelectionRange()，其中使用该元素作为第二个参数 ，并且使用 selectionStart 作为第一个参数。

HTMLTextAreaElement.selectionDirection

一个 string，返回/设置选择发生的方向。如果选择是在当前语言环境的开始到结束方向上执行的，那么是 "forward"，对于相反方向，则是 "backward"。如果方向未知，则是 "none"。

HTMLTextAreaElement.validity 只读

一个 <a href="/api/ValidityState.html" title=""><code>ValidityState</code></a>对象，返回此元素所在的有效性状态。

HTMLTextAreaElement.willValidate 只读

一个 boolean，返回元素是否是约束验证的候选者。如果任何条件禁止它进行约束验证，（包括它的 readOnly 或 disabled 属性是 true），则值为 false。

HTMLTextAreaElement.validationMessage 只读

一个 string，返回描述控件不满足的验证约束（如果有）的本地化消息。如果控件不是约束验证的候选者（ willValidate 是 false）或者它满足其约束，则它是空字符串。

HTMLTextAreaElement.autocomplete

暂无

HTMLTextAreaElement.autocapitalize

一个 string，返回/设置元素的用户输入的大小写行为。有效值为：none，off，characters，words 和 sentences。

HTMLTextAreaElement.inputMode

暂无

HTMLTextAreaElement.wrap

一个 string，返回/设置 wrap HTML 属性，指示控件如何换行文本。

tabIndex 和accessKey 两个属性 从 HTML5 开始继承自 HTMLElement，但是在 DOM Level 2 HTML 和早期规范中在 HTMLTextAreaElement上定义。

方法

HTMLTextAreaElement.blur()

从控件中移除焦点；随后键盘输入将不会有效果。

HTMLTextAreaElement.focus()

聚焦到控件上；随后键盘输入将转到此元素中。

HTMLTextAreaElement.select()

选中控件的内容。

HTMLTextAreaElement.setRangeText()

用新文本替换元素中的一段文本。

HTMLTextAreaElement.setSelectionRange()

选择元素中的一段文本（但不会对其进行聚焦）。

HTMLTextAreaElement.checkValidity()

如果控件是约束验证的候选者，则返回 false，并且它不满足其约束。在这种情况下，它还会在控件上触发可取消的 invalid 事件。如果控件不是约束验证的候选者，或者如果它满足其约束，则返回 true。

HTMLTextAreaElement.reportValidity()

此方法向用户报告元素约束的问题（如果有）。如果有问题，它会在元素处触发一个可取消的 invalid 事件，并返回 false；如果没有问题，则返回 true。

HTMLTextAreaElement.setCustomValidity(DOMstring)

为元素设置自定义有效性消息。如果此消息不是空字符串，则该元素触发自定义有效性错误，并且不进行验证。

blur() 和 focus() 两个方法从 HTML5 开始继承自 HTMLElement，但是在 DOM Level 2 HTML 和早期规范中在 HTMLTextAreaElement 上定义。

事件

使用 addEventListener() 或通过为 oneventname 属性分配事件监听器来监听这个接口的这些事件：

input 事件

当 <input>，<select> 或 <textarea> 元素的 value 发生更改时触发。

实例

textarea 自动增长实例：

输入内容时，textarea 将自动增长：

<style>
textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}
</style>

<script>
function autoGrow (oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
}
</script>

<form>
  <fieldset>
    <legend>您的评论</legend>
    <p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p>
    <p><input type="submit" value="发送" /></p>
  </fieldset>
</form>

尝试一下 »

插入 HTML 标记实例

在 textarea 中插入一些 HTML 标签，字符表情或任何自定义文本。

<style>
/* 用于装饰内部 span 的 CSS 以表现为链接： */
.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: #0000ff;
}
</style>

<script>
function insertMetachars(sStartTag, sEndTag) {
  var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
  oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
  oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
  oMsgInput.focus();
}
</script>

<form name="myForm">
<p>[&nbsp;<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');"><strong>加粗</strong></span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');"><em>斜体</em></span> | <span class="intLink" onclick="var newURL=prompt('输入链接的完整 URL');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">代码</span> | <span class="intLink" onclick="insertMetachars(' :-)');">微笑表情</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>

尝试一下 »

控制最大长度和行数实例

创建一个 textarea，控制每行最多字符数和最大行数：

<!-- 在 HTML 中我们只需要将函数挂钩到 `onkeypress` 事件并指定我们的 textarea 不接受粘贴： -->
<form>
  <p>每行具有固定字符数的 Textarea：<br />
    <textarea cols="50" rows="10" onkeypress="return checkRows(this, event);"
              onpaste="return false;"></textarea>
  </p>
</form>

<script>
// 创建一个函数，将文本字段和键盘事件作为输入，并确定是否已达到任何限制。如果尚未达到限制，则允许键盘输入。
function checkRows(oField, oKeyEvent) {
  var nKey = (oKeyEvent || /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }).keyCode,

    // 在这里放置每行的最大字符数：
    nCols = 10,
    // 在这里放置的最大行数：
    nRows = 5,

    nSelS = oField.selectionStart, nSelE = oField.selectionEnd,
    sVal = oField.value, nLen = sVal.length,

    nBackward = nSelS >= nCols ? nSelS - nCols : 0,
    nDeltaForw = sVal.substring(nBackward, nSelS).search(new RegExp("\\n(?!.{0," + String(nCols - 2) + "}\\n)")) + 1,
    nRowStart = nBackward + nDeltaForw,
    aReturns = (sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)).match(/\n/g),
    nRowEnd = nSelE + nRowStart + nCols - nSelS,
    sRow = sVal.substring(nRowStart, nSelS) + sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
    bKeepCols = nKey === 13 || nLen + 1 < nCols || /\n/.test(sRow) || ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) && (sRow.length < nCols || (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));

  return (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) && ((nKey > 32 && nKey < 41) || bKeepCols);
}
</script>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard HTMLTextAreaElement 的定义	现行的标准	-
HTML5 HTMLTextAreaElement 的定义	推荐	tabindex 和 accesskey 属性，以及 blur() 和 focus() 方法现在在 HTMLElement 上定义。 添加了以下属性：autofocus，placeholder，dirName，wrap，maxLength，required，textLength，labels，selectionStart，selectionEnd，selectionDirection ，validity，validationMessage 和 willValidate。 添加了以下方法：checkValidity()，setCustomValidity() 和 setSelectionRange()。
Document Object Model (DOM) Level 2 HTML Specification HTMLTextAreaElement 的定义	已过时	defaultValue 属性不包含 value 属性的初始值，而是 <textarea> 内容的初始值。
Document Object Model (DOM) Level 1 Specification HTMLTextAreaElement 的定义	已过时	初始定义

桌面浏览器兼容性

移动浏览器兼容性