📌  相关文章
📜  html textarea 背景文本 - Html (1)

📅  最后修改于: 2023-12-03 14:41:47.118000             🧑  作者: Mango

HTML Textarea 背景文本

HTML 的 textarea 元素是一个常见的输入区域，它可以让用户输入或编辑一段文本。但是，在 textarea 中输入的文本如果过长，会使用户失去关注的焦点。因此，一些网站采用“背景文本”（即占位符文本）的形式，向用户提示应该在输入区域中输入什么内容。

实现方法

在 HTML 中，可以通过 placeholder 属性来实现背景文本。该属性的取值就是文本框中占位符的内容。

<textarea placeholder="请输入内容"></textarea>

在页面中显示的效果如下图所示：

HTML Textarea with Placeholder

程序实现

在编写程序时，可以考虑采用以下方法来设置 textarea 的背景文本。

方法一：使用 placeholder 属性

在 HTML 中直接添加 placeholder 属性即可。

<textarea id="input" placeholder="请输入内容"></textarea>
方法二：使用 JavaScript 实现

当需要实现更复杂的背景文本功能时，可以使用 JavaScript 进行相关操作。如设置文本颜色、字体大小、渐变效果等。下面是一个简单的实例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML Textarea 背景文本</title>
  <style>
    #input {
      width: 200px;
      height: 100px;
      font-size: 14px;
      color: #999;
      background-color: #fafafa;
      border: none;
      border-radius: 4px;
      padding: 12px;
      box-sizing: border-box;
    }
    .input-label {
      position: absolute;
      top: 16px;
      left: 16px;
      font-size: 14px;
      color: #ccc;
      pointer-events: none;
      transition: all .2s ease-out;
    }
    .input-label.active {
      transform: translateY(-22px) scale(.8);
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <textarea id="input"></textarea>
    <label for="input" class="input-label">请输入内容</label>
  </div>
  <script>
    const input = document.querySelector('#input');
    const label = document.querySelector('.input-label');
    input.addEventListener('input', () => {
      if (input.value) {
        label.classList.add('active');
      } else {
        label.classList.remove('active');
      }
    });
  </script>
</body>
</html>

运行效果如下：

HTML Textarea with Background Text

结论

textarea 的背景文本是一个有用的功能，可以帮助用户更好地理解应该在输入框中键入哪些内容。在设置背景文本时，可以通过 placeholder 属性或 JavaScript 进行实现。在设计背景文本的风格时，应该根据页面整体风格进行调整，以保证一致性。