首页 前端知识 HTML textArea元素的使用你知道多少?

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

2024-08-04 22:08:00 前端知识 前端哥 758 134 我要收藏

简单介绍:

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

常用属性:

autofocusautofocus规定当页面加载时,文本区域自动获得焦点。
colsnumber规定文本区域内可见的宽度。
disableddisabled规定禁用文本区域。
form(New)form_id定义文本区域所属的一个或多个表单。
maxlength(New)number规定文本区域允许的最大字符数。
nametext规定文本区域的名称。
placeholder(New)text规定一个简短的提示,描述文本区域期望的输入值。
readonlyreadonly规定文本区域为只读。
required(New)required规定文本区域是必需的/必填的。
rowsnumber规定文本区域内可见的行数。
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 思否

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14754.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!