HTML textArea元素的使用你知道多少？

crary,记忆

于 2024-05-15 09:30:00 发布

阅读量680

点赞数 25

分类专栏：前端知识总结文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/qq_44327851/article/details/138804023

版权

前端知识总结专栏收录该内容

57 篇文章 1 订阅

订阅专栏

简单介绍：

<textarea> 标签定义多行文本输入控件。
<textarea> 元素通常用在表单中，用于收集用户的输入，如评论或评论。
文本区域可以容纳无限数量的字符，并且文本以等宽字体（通常是 Courier）呈现。
文本区域的大小由 cols 和 rows 属性（或使用 CSS）规定。
提交表单后需要 name 属性来引用表单数据（如果省略 name 属性，则不会提交文本区域的数据）。
需要 id 属性将文本区域与标签（label）相关联。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

常用属性：

autofocus	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的宽度。
disabled	disabled	规定禁用文本区域。
form(New)	form_id	定义文本区域所属的一个或多个表单。
maxlength(New)	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholder(New)	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
required(New)	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrap(New)	hard soft	规定当提交表

使用场景：

textArea自适应高度

提醒： 下面的三种方法在Enter键提交表单时都要额外处理一下，因为Enter键会换行，这样会带来一定的高度样式的不正确性，所以这时我们可以用event.preventDefault来阻止Enter键换行的默认行为。

第一种方法：通过用隐藏div（ 或者使用pre标签）撑起高度的方式来设置文本域自适应高度；

思路：

将 textarea 外面套一个容器box，同时在这个box中放入一个隐藏的div（visibility:hidden）；
将容器box设置成position:relative，将textArea设置成position:absolute，这样textArea不会占据容器box的任何高度了，也就是说容器box的高度就是有隐藏的div的高度撑开；
监听 textarea 的输入事件并将其中的文本动态的同步到div中，这样div 就可以撑开容器box；
由于div的高度和文本框的高度一致，那么 textarea 的高度自然就是其中文字内容的高度了 (注意div的样式要跟textArea的样式设置的一模一样，特别是line-height, font-size等会影响高度的样式，一定要一样) ；

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
    width: 300px;
    height: auto;
    border: 1px solid #ccc;
  }
  textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overgflow:hidden;//也可以不设置成hidden, 这样在高度超出一定下会显示滚动条以显示textArea的完整内容
  }
  .hidden-div {
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 16px;
  }
</style>
</head>
<body>

<div class="container">
  <textarea id="textarea"></textarea>
  <div class="hidden-div" id="hiddenDiv"></div>
</div>

<script>
  const textarea = document.getElementById('textarea');
  const hiddenDiv = document.getElementById('hiddenDiv');

  textarea.addEventListener('input', function() {
    hiddenDiv.textContent = textarea.value + '\n';  
  });
</script>

</body>
</html>

第二种方法：通过用JS中的scrollHeight手动设置textArea的高度；

思路：

通过document的获取元素的方法得到 textarea 元素的相关信息并将textarea 设置成不能通过拖拽改变大小：resize: none；
监听 textarea 的输入事件并对其进行高度的设置，与scrollHeight高度进行同步；
textArea.style.height = 'auto' 这句话必须写不然会导致删除文字之后textArea框剩下的文字不会进行自适应高度，出现大块空白；
当然下面是简单的例子，大家也还可以在监听的input方法中判断输入框有无值进行高度的设置，有值自适应，无值的时候设置默认高度等......

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Resize Textarea</title>
<style>
textarea {
  resize: none;
  overflow: hidden;
}
</style>
</head>
<body>
<textarea id="textarea" rows="1" placeholder="Type something.." (input)="adjustHeight()"></textarea>

<script>
    adjustHeight() {
        const textArea = document.getElementById('textarea') as HTMLTextAreaElement;
        //下面这句话必须写 不然会导致删除文字textArea剩下的文字不会自适应高度
        textArea.style.height = 'auto';
        //下面这句话是关键句 可以让textArea的高度根据文字内容的高度进行自适应
        textArea.style.height = textArea.scrollHeight + 'px';
    }
</script>
</body>
</html>

第三种方法：通过div的contenteditable属性模拟textarea文本域实现高度自适应；(代码演示：https://www.zhangxinxu.com/study/201012/div-textarea-height-auto.html)

//CSS
.test_box {
    width: 400px; 
    min-height: 120px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    _overflow-y: visible;
}


//HTML
<div class="test_box" contenteditable="true"><br /></div>

注意事项：

问：textArea框有个时候最下面会莫名其妙的出现一段空白，这是为什么呢？
答：textarea标签没有写到同一行会出现这种问题（https://www.cnblogs.com/orange-tree/archive/2012/11/16/2772882.html）

参考链接及感谢：

div模拟textarea文本域轻松实现高度自适应 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

javascript - textarea高度自适应的两种方案 - 前端学习路-郭盖 - SegmentFault 思否

crary,记忆

关注

25
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML textArea元素的使用你知道多少？

下面的三种方法在Enter键提交表单时都要额外处理一下，因为Enter键会换行，这样会带来一定的高度样式的不正确性，所以这时我们可以用。模拟textarea文本域实现高度自适应；scrollHeight手动设置。Enter键换行的默认行为。textArea自适应高度。第二种方法：通过用JS中的。来设置文本域自适应高度；textArea的高度；
复制链接

扫一扫