Skip to main content

多行文本域元素 textarea

Docs

  • textarea 的常用属性：

    • cols：列数
    • rows：行数

  • 缩放的 CSS 设置

    • 禁止缩放：resize: none;
    • 水平缩放：resize: horizontal;
    • 垂直缩放：resize: vertical;
    • 水平垂直缩放：resize: both;
    • block 和 inline：实验性的值，仅允许以 block 或 inline 方向缩放，如何变化取决于文字的方向，请参阅处理不同文字方向以了解更多内容。

  • 控制多行渲染​

    <textarea> 接受三种属性来控制其多行渲染行为：

    • cols 指定文本控件的可见宽度（列），单位为字符的宽度。这实际上是起始宽度，因为它可以通过调整 <textarea> 的大小来改变，也可以用 CSS 重写。如果没有指定，默认值是 20。
    • rows 指定文本控件的可见行数。这实际上是起始高度，因为它可以通过调整 <textarea> 的大小来改变，也可以用 CSS 重写。如果没有指定，默认值是 2。
    • wrap 指定如何控制文本换行。取值可能为 soft（默认值），意味着提交的文字没有换行，而浏览器中渲染的文字有换行；hard（使用此属性必须指定 cols 的值），意味着提交的文字和浏览器中渲染的文字都有换行；和 off，停止任何换行行为。

  • <textarea> 元素和普通的单行文本域的主要区别是，用户可以在要提交的数据中包含硬换行（如按下回车键产生）。

  • <textarea> 也需要关闭标签，其中要包含的默认文字需要放在开闭标签之间。作为对比，<input> 是不包含关闭标签的空元素，它的默认值应该在 value 属性中指定。

  • 在视觉上，输入的文字会换行，并且表单空间的大小是可调的。现代浏览器会提供拖动手柄，你可以通过拖拽来放大或缩小文本区的大小。

    注意

    即使可以将任何东西放入到 <textarea> 元素中，甚至可以包含其他 HTML 元素、CSS 和 JavaScript，由于该元素的特性，这些内容都将以纯文本的形式渲染。在非表单组件上使用 contenteditable 可以为捕捉 HTML 或富文本内容提供 API。

Loading Github Gist ...
Details