根据输入框内容动态显示/隐藏标签：JavaScript 实现指南-js教程-PHP中文网

根据输入框内容动态显示/隐藏标签：JavaScript 实现指南

心靈之曲

发布： 2025-09-02 19:16:13

原创

673人浏览过

根据输入框内容动态显示/隐藏标签：javascript 实现指南

本文旨在提供一种使用 JavaScript 根据输入框内容动态控制标签显示与隐藏的解决方案。通过监听输入框的值，并结合 CSS 样式控制，可以实现当输入框为空时隐藏标签，当输入框有内容时显示标签的效果，提升用户体验。本文将提供两种实现方法，分别使用 CSS 类切换和直接修改 display 属性。

方法一：使用 CSS 类切换

这种方法通过添加或移除 CSS 类来控制元素的显示与隐藏，具有良好的可维护性和可读性。

定义 CSS 类：

首先，在你的 CSS 文件中定义一个名为 hide 的类，该类会将元素的 display 属性设置为 none，从而隐藏元素。

立即学习“Java免费学习笔记（深入）”；
```
.hide {
  display: none;
}
```
登录后复制

获取元素：

使用 JavaScript 获取需要控制的标签元素和输入框元素。

const capInput = document.getElementById('cap'); // 输入框
const t1w_1Label = document.getElementById('t1w_1'); // 标签

登录后复制

监听输入框事件：

监听输入框的 input 事件，该事件在输入框的值发生变化时触发。
```
capInput.addEventListener('input', function() {
  const capValue = capInput.value.trim(); // 获取输入框的值，并去除首尾空格
  t1w_1Label.classList.toggle('hide', capValue === ''); // 根据输入框的值切换 'hide' 类
});
```
登录后复制
这段代码的核心是 classList.toggle() 方法。它接受两个参数：要切换的类名和一个布尔值。如果布尔值为 true，则添加该类名；如果为 false，则移除该类名。 capValue === '' 判断输入框的值是否为空，如果为空，则添加 hide 类，隐藏标签；否则，移除 hide 类，显示标签。
HTML 结构：

确保 HTML 中包含相应的输入框和标签元素。

标书对比王
标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情
```
<input type="text" id="cap" name="cap" placeholder="Name"/>
<label id="t1w_1">Name</label>
```
登录后复制

完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>动态显示/隐藏标签</title>
  <style>
    .hide {
      display: none;
    }
  </style>
</head>
<body>

  <input type="text" id="cap" name="cap" placeholder="Name"/>
  <label id="t1w_1">Name</label>

  <script>
    const capInput = document.getElementById('cap');
    const t1w_1Label = document.getElementById('t1w_1');

    capInput.addEventListener('input', function() {
      const capValue = capInput.value.trim();
      t1w_1Label.classList.toggle('hide', capValue === '');
    });
  </script>

</body>
</html>

登录后复制

方法二：直接修改 display 属性

这种方法直接修改元素的 display 属性来控制显示与隐藏，代码更简洁。

获取元素：

与方法一相同，获取需要控制的标签元素和输入框元素。

const capInput = document.getElementById('cap'); // 输入框
const t1w_1Label = document.getElementById('t1w_1'); // 标签

登录后复制

监听输入框事件：

监听输入框的 input 事件。
```
capInput.addEventListener('input', function() {
  const capValue = capInput.value.trim(); // 获取输入框的值，并去除首尾空格

  if (capValue === '') {
    t1w_1Label.style.display = 'none'; // 如果输入框为空，则隐藏标签
  } else {
    t1w_1Label.style.display = 'inline'; // 如果输入框不为空，则显示标签 (inline 是 label 的默认 display 值)
  }
});
```
登录后复制
这段代码直接修改 t1w_1Label 的 style.display 属性。当输入框为空时，设置为 none，隐藏标签；否则，设置为 inline，显示标签。注意，这里使用 inline 作为标签的显示方式，这是 label 元素的默认值。如果你的标签使用了其他的显示方式（如 block 或 inline-block），则需要相应地修改 display 属性的值。
HTML 结构：

与方法一相同，确保 HTML 中包含相应的输入框和标签元素。
```
<input type="text" id="cap" name="cap" placeholder="Name"/>
<label id="t1w_1">Name</label>
```
登录后复制

完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>动态显示/隐藏标签</title>
</head>
<body>

  <input type="text" id="cap" name="cap" placeholder="Name"/>
  <label id="t1w_1">Name</label>

  <script>
    const capInput = document.getElementById('cap');
    const t1w_1Label = document.getElementById('t1w_1');

    capInput.addEventListener('input', function() {
      const capValue = capInput.value.trim();

      if (capValue === '') {
        t1w_1Label.style.display = 'none';
      } else {
        t1w_1Label.style.display = 'inline';
      }
    });
  </script>

</body>
</html>

登录后复制

注意事项

初始状态： 如果希望页面加载时，当输入框为空时标签就隐藏，需要在 JavaScript 代码中添加初始化逻辑，在页面加载完成后执行一次判断。例如，可以在 window.onload 事件中添加相应的代码。
trim() 方法： 使用 trim() 方法去除输入框值的首尾空格，可以避免因空格导致判断错误。
显示方式： label 元素的默认显示方式是 inline。如果你的标签使用了其他的显示方式，需要相应地修改 display 属性的值。
性能优化： 如果需要控制的元素很多，可以考虑使用事件委托，将事件监听器添加到父元素上，减少事件监听器的数量，提高性能。

总结

本文介绍了两种使用 JavaScript 根据输入框内容动态控制标签显示与隐藏的方法。第一种方法使用 CSS 类切换，代码可读性高，易于维护。第二种方法直接修改 display 属性，代码更简洁。开发者可以根据自己的需求选择合适的方法。在实际应用中，还需要注意一些细节问题，如初始状态、空格处理和显示方式等，以确保代码的正确性和性能。

以上就是根据输入框内容动态显示/隐藏标签：JavaScript 实现指南的详细内容，更多请关注php中文网其它相关文章！