如“幽灵”一样实现高度“听话”的多行文本输入框

2023-11-30 11:15:31

HTML 代码的“搭台”：为你输入广阔天地

实现一个高度“听话”的多行文本输入框，你需要借助 HTML 中的 textarea 标签。这个标签专门用于创建多行文本输入框，让你可以输入任意长度的内容。

在使用 textarea 标签时，你需要指定它的 rows 和 cols 属性。rows 属性指定文本框可以容纳的行数，cols 属性指定文本框可以容纳的列数。例如，如果你想创建一个可以容纳 5 行、20 列的文本框，你可以使用以下代码：

<textarea rows="5" cols="20"></textarea>

CSS 的“粉墨登场”：让文本框随“意”而“动”

添加了基本 HTML 结构之后，我们就要借助 CSS 来让文本框随着用户的输入而变化。这可以通过调整文本框的高度来实现。当用户输入的内容超过文本框的高度时，文本框的高度会自动增加，以容纳所有的内容。

你可以使用以下 CSS 代码来实现这一效果：

textarea {
  height: auto;
  min-height: 100px;
}

JavaScript 的“妙笔生花”：展现文本框的“无限风光”

有了 HTML 和 CSS 的“铺垫”，我们还可以使用 JavaScript 来进一步增强文本框的功能。例如，你可以使用 JavaScript 来限制文本框的输入长度、自动调整文本框的宽度等。

你可以使用以下 JavaScript 代码来限制文本框的输入长度：

var textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  if (textarea.value.length > 100) {
    textarea.value = textarea.value.substring(0, 100);
  }
});

你还可以使用 JavaScript 来自动调整文本框的宽度：

var textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  textarea.style.width = textarea.scrollWidth + 'px';
});