textarea相关属性及使用

介绍

什么是textarea标签？在HTML中，像年龄，姓名这种用单行文本框就能搞定，但如果是多行文本，就需要用到textarea标签。textarea标签用于创建多行文本输入框。

基本语法

<textarea name="Letter" rows="4" cols="50">输入文本内容textarea>

textarea标签必须闭合，有起始标签和结束标签，任何文本都应该放在起始和结束标签之间，没有文本将显示空白

属性

name：指定表单元素的名称
rows：指定文本框中的可见行数
cols：指定文本框中的可见字符数（列数）
id：这是元素的唯一标识符，通常与 label 元素的 for 属性关联
placeholder：可以设置一个占位符文本，提示用户输入的内容。类似于输入框的 placeholder 属性
readonly：设置为 readonly 将文本域设置为只读，用户可以看到内容但无法修改
disabled：设置为 disabled 将禁用文本域，用户无法与之交互
maxlength：限制用户输入的最大字符数
wrap：定义文本在何处换行。可选值为 soft（在单词边界处换行）和 hard（在指定的列数换行）
autofocus：设置为 autofocus 会在页面加载时自动将焦点设置在文本域上
required：设置为 required 会在提交表单时验证字段是否已填写

注意

在文本域中，rows 属性用来设置文本域的可见行数，也就是文本域的高度。当文本内容超出设置高度时，会出现纵向滚动条。用户拖动滚动条可以查看全部内容
如果要禁止拉伸文本框大小，可以用

resize: none;

当输入的文本超出设置的行数时自动显示滚动条

overflow:auto

有时候，为了文本输入和呈现的美观性，可以为文本框设置内边距。

应用

限制字数

在大多数实践应用中，都会用到文本框来限制字数。

<textarea id="textarea" maxlength="100">textarea>
<p id="counter">还可输入: 100 字p >

document.getElementById('textarea').addEventListener('input', function() {
    var maxLength = parseInt(this.getAttribute('maxlength'));
    var currentLength = this.value.length;
    var remaining = maxLength - currentLength;
    
    document.getElementById('counter').innerText = '还可输入: ' + remaining + ' 字';
});

以上是实现限制字数的功能简单代码，在使用的时候可以自己设置样式。

随内容扩大

#textarea{
     resize: none; /* 禁止浏览器默认的调整大小功能 */
     overflow: hidden; /* 隐藏超出部分 */
     padding: 5px; /* 为了更好的视觉效果 */
     box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度和高度 */
     min-height: 50px; /* 设置最小高度 */
}

document.getElementById('textarea').addEventListener('input', function() {
    this.style.height = 'auto'; // 重置高度
    this.style.height = this.scrollHeight + 'px'; // 根据滚动高度设置高度
});

textarea和input的text的区别

input是通过将type属性设置为text，input标签可以获得与textarea标签类似的效果，但是input标签只能输入一行文本