登录
首页 >  文章 >  前端

表单控件动态显示技巧

时间：2025-09-29 14:21:30 454浏览 收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《表单控制元素显示，前端动态实现方法》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

前端开发：基于表单输入值动态控制HTML元素显示

本教程详细介绍了如何在前端开发中，根据用户在表单输入框中填写的值，动态控制另一个HTML元素的显示或隐藏。通过sessionStorage实现跨页面数据传递，并利用JavaScript结合CSS的两种方法（直接修改display属性或切换CSS类）来实现元素的条件渲染，确保页面内容的灵活性和用户体验。

一、场景概述与数据传递

在Web应用中，常见需求是根据用户在某个页面（例如表单页）的输入，决定在另一个页面（例如结果页）上显示哪些内容。本教程将以一个具体示例来阐述这一过程：当用户在index.html页面的“Name”输入框未填写任何内容时，result.html页面上的“Name”标签及其对应值应被隐藏。

为了实现跨页面的数据传递，我们通常会选择以下几种方式：URL查询参数、localStorage或sessionStorage。本示例采用sessionStorage，它允许在用户会话期间存储数据，并在不同页面间共享。

1. index.html (表单页面)

包含一个用于输入姓名的文本框：

<html>
    <head>
        <title>Input Form</title>
        <link rel="stylesheet" href="style.css" />
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body> 
        <form action="result.html" method="POST">
            &lt;input type=&quot;text&quot; id=&quot;cno&quot; name=&quot;cno&quot; placeholder=&quot;Count no..&quot; autofocus required /&gt;
            &lt;input type=&quot;text&quot; id=&quot;cap&quot; name=&quot;cap&quot; placeholder=&quot;    Name&quot;/&gt;
            &lt;input type=&quot;submit&quot; onclick=&quot;handleSubmit()&quot;/&gt;
        </form>
    </body>
</html>

2. index.js (数据存储逻辑)

在表单提交前，将输入框的值存储到sessionStorage中。

function handleSubmit () {
    const cno = document.getElementById('cno').value;
    const cap = document.getElementById('cap').value; // 获取“Name”输入框的值

    sessionStorage.setItem("CNO", cno);
    sessionStorage.setItem("CAP", cap); // 将“Name”值存储到sessionStorage
    return;
}

3. result.html (结果页面)

包含需要根据条件显示或隐藏的“Name”标签和显示值的span元素。

<html lang="en">
<script type="text/javascript" src="result.js" ></script>
<body style="margin: 100px;">

<span>: 6051670/S/23-24/210420230<span id="result-cno" /></span>/PS
<br>
<label id="t1w_1">Name</label>
<span id="result-cap"/></span>

</body>
</html>

4. result.js (数据读取与初始显示)

在页面加载时，从sessionStorage中获取数据，并将其填充到对应的span元素中。这是我们进行条件判断和隐藏操作的起点。

window.addEventListener('load', () => {
    const cno = sessionStorage.getItem('CNO');
    const cap = sessionStorage.getItem('CAP'); // 获取存储的“Name”值

    document.getElementById('result-cno').innerHTML = cno;
    document.getElementById('result-cap').innerHTML = cap;

    // 接下来的代码将在此处添加，用于条件隐藏
});

二、核心实现：条件隐藏元素

现在，我们将介绍两种主要方法，根据cap（“Name”输入框的值）是否为空来隐藏result.html中的元素。

方法一：直接操作元素的style.display属性

这种方法直接通过JavaScript修改元素的display CSS属性，将其设置为none即可隐藏。

实现步骤：

  1. 获取sessionStorage中的cap值。
  2. 获取目标label元素。
  3. 判断cap值是否为空字符串。
  4. 如果为空，则将label元素的style.display属性设置为none。

result.js 代码修改：

在window.addEventListener('load', ...)的回调函数中添加以下逻辑：

window.addEventListener('load', () => {
    const cno = sessionStorage.getItem('CNO');
    const cap = sessionStorage.getItem('CAP'); 

    document.getElementById('result-cno').innerHTML = cno;
    document.getElementById('result-cap').innerHTML = cap;

    // 获取需要条件隐藏的label元素
    const nameLabel = document.getElementById('t1w_1');
    // 获取显示name值的span元素 (可选，如果name为空，通常也隐藏这个)
    const nameValueSpan = document.getElementById('result-cap');

    // 判断cap值是否为空或只包含空白字符
    if (!cap || cap.trim() === '') {
        nameLabel.style.display = 'none'; // 隐藏label
        if (nameValueSpan) { // 如果存在，也隐藏显示值的span
            nameValueSpan.style.display = 'none';
        }
    }
});

优点： 简单直接，无需额外CSS定义。 缺点： 混合了JS逻辑和样式控制，可能不利于大型项目的代码维护。

方法二：通过CSS类切换

这种方法将元素的隐藏样式定义在一个CSS类中，然后通过JavaScript动态地添加或移除这个CSS类。这是一种更推荐的做法，因为它实现了结构、样式和行为的分离。

1. 定义CSS隐藏类

在你的style.css文件（或直接在result.html的