《前端知识点》2020年3月29日-textarea

最新推荐文章于 2026-01-29 11:00:57 发布

原创最新推荐文章于 2026-01-29 11:00:57 发布 · 429 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

#jQuery

本文介绍了HTML的textarea元素，用于定义多行文本输入控件，对比input元素，textarea支持多行输入和自动换行。重点讲解了textarea的cols、rows属性以及wrap属性的用法。同时，还探讨了jQuery的wrap()方法和prev()方法在文档操作中的应用。

HTML的textarea元素

<textarea> 标签定义多行的文本输入控件。

textarea元素和前面介绍的input元素都可以获取用户在输入框输入的文本内容，哪为什么还要提供textarea元素呢？这就涉及到输入文本内容多少的问题，input元素只能输入单行文本内容，输入再多的文字也只能在一行显示，而且没有滚动条；textarea元素就不同了，textarea元素可以输入多行文本内容，支持文本回车和在textarea的宽度内文本自动换行，当输入的文本内容行数超过textarea元素的高度时，textarea元素会自动出现纵向滚动条。

textarea元素使用textarea标签，textarea标签有两个比较重要的属性cols和rows，cols属性用于设置textarea元素输入区域的可见宽度，rows属性用于设置textarea元素输入区域的可见高度。虽然可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

以下是textarea的属性介绍：

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
cols	number	规定文本区内的可见宽度。
disabled	disabled	规定禁用该文本区。
form	form_id	规定文本区域所属的一个或多个表单。
maxlength	number	规定文本区域的最大字符数。
name	name_of_textarea	规定文本区的名称。
placeholder	text	规定描述文本区域预期值的简短提示。
readonly	readonly	规定文本区为只读。
required	required	规定文本区域是必填的。
rows	number	规定文本区内的可见行数。
wrap	hard 、 soft	规定当在表单中提交时，文本区域中的文本如何换行。。

HTML <textarea> 标签的 wrap 属性

通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。如果把 wrap 设置为 off，将得到默认的动作。