You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Bootstrap响应式表单密码显示/隐藏功能异常求助

avatar
开发者阿泽
2026-7-23
密码显示/隐藏功能仅在SM尺寸生效的问题修复

问题描述

我通过复制表单并使用Bootstrap的d-xl-block、d-sm-block等响应式类适配了5-6种不同屏幕尺寸，但目前只有SM尺寸下密码显示/隐藏功能正常，其他尺寸仅切换眼睛图标，输入框类型没有变更。

原代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="icon" href="img/logo2.png" type="img/logo2.png /">
    <title>Kayıt Ol</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
    :root{
    font-family: 'Work Sans', sans-serif;
    }
    
    body{
        font-family: var(--font-style);
        background-image: url('img/logo_background_2.jpg');
        background-repeat: no-repeat;
        background-size: 100% 110%;
        background-attachment: fixed;
    }

    .pass {
        position: relative;
        left: 53%;
        bottom: 30px;
    }
    /* Animation */
    .h1,h4,p{
        filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.38));
        
    }
@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}
    
</style>
<body >
<?php 
    include ("loginAndRegisterTitle.php"); 
?>
<br>

<form class="d-block d-sm-none animated animatedFadeInUp fadeInUp container text-center my-4 w-100 mx-auto " action="conn.php" method="POST" style="color:white;">
    <br>
    <div>
    <label for="password">Şifre</label>
        <div class="form-group">
            <input type="password" id="sifre" name="sifre" class="form-control" placeholder="Şifrenizi belirleyin." required> 
            <i class="fa fa-eye parola pass" onClick="parolaGoster('sifre', this)"></i>
        </div>
    </div>

        
</form>

<form class="d-none d-sm-block animated d-md-none animatedFadeInUp fadeInUp container text-center my-4 w-75 mx-auto " action="conn.php" method="POST" style="color:white;">
    <br>
    
    <div>
    <label for="password">Şifre</label>
        <div class="form-group">
            <input type="password" id="sifre" name="sifre" class="form-control" placeholder="Şifrenizi belirleyin." required> 
            <i class="fa fa-eye parola pass" onClick="parolaGoster('sifre', this)"></i>
        </div>
    </div>
 
        
</form>

<form class="d-none d-md-block d-lg-none animated animatedFadeInUp fadeInUp container text-center my-4 w-50 mx-auto " action="conn.php" method="POST" style="color:white;">
    <br>
    <div>
    <label for="password">Şifre</label>
        <div class="form-group">
            <input type="password" id="sifre" name="sifre" class="form-control" placeholder="Şifrenizi belirleyin." required> 
            <i class="fa fa-eye parola pass" onClick="parolaGoster('sifre', this)"></i>
        </div>
    </div>
        
</form>

<form class="d-none d-lg-block d-xl-none animated animatedFadeInUp fadeInUp container text-center my-4 w-50 mx-auto " action="conn.php" method="POST" style="color:white;">
    <div>
    <label for="password">Şifre</label>
        <div class="form-group">
            <input type="password" id="sifre" name="sifre" class="form-control" placeholder="Şifrenizi belirleyin." required> 
            <i class="fa fa-eye parola pass" onClick="parolaGoster('sifre', this)"></i>
        </div>
    </div>
  
        
</form>

<form class="d-none d-xl-block animated animatedFadeInUp fadeInUp container text-center my-4 w-50 mx-auto " action="conn.php" method="POST" style="color:white;">
<br>

    <div>
    <label for="password">Şifre</label>
        <div class="form-group">
            <input type="password" id="sifre" name="sifre" class="form-control" placeholder="Şifrenizi belirleyin." required> 
            <i class="fa fa-eye parola pass" onClick="parolaGoster('sifre', this)"></i>
        </div>
    </div>
   
</form>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
    <script>
        function parolaGoster(id, el) {
          let x = document.getElementById(id);
          if (x.type == "password") {
            x.type = "text";
            el.className = 'fa fa-eye-slash parola pass';
          } else {
            x.type = "password";
            el.className = 'fa fa-eye parola pass';
          }
        }

</body>
</html>

问题根源

你复制了多份表单，每份表单里的密码输入框都使用了相同的id="sifre"。HTML规范中id必须是唯一的，当调用document.getElementById('sifre')时，只会返回DOM中第一个匹配的元素（也就是SM尺寸表单里的输入框），所以其他尺寸的输入框不会被修改。

修复方案

1. 移除重复表单，用响应式宽度类控制容器

不需要复制多份表单，只保留一份表单，通过Bootstrap的响应式宽度类（结合断点前缀）实现不同屏幕尺寸的适配，减少冗余代码的同时避免重复id问题。

2. 优化密码切换逻辑（可选，更健壮）

不再依赖id，直接通过点击的图标找到对应的兄弟输入框，即使后续表单结构调整也不容易出错。

修复后的完整代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="icon" href="img/logo2.png" type="img/logo2.png /">
    <title>Kayıt Ol</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
    :root{
        font-family: 'Work Sans', sans-serif;
    }
    
    body{
        font-family: var(--font-style);
        background-image: url('img/logo_background_2.jpg');
        background-repeat: no-repeat;
        background-size: 100% 110%;
        background-attachment: fixed;
    }

    .pass {
        position: relative;
        left: 53%;
        bottom: 30px;
    }
    /* Animation */
    .h1,h4,p{
        filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.38));
        
    }
@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}
    
</style>
<body >
<?php 
    include ("loginAndRegisterTitle.php"); 
?>
<br>

<!-- 保留单份表单，用响应式宽度类适配不同屏幕 -->
<form class="animated animatedFadeInUp fadeInUp container text-center my-4 w-100 w-sm-75 w-md-50 mx-auto" action="conn.php" method="POST" style="color:white;">
    <br>
    <div>
        <label for="password">Şifre</label>
        <div class="form-group">
            <input type="password" id="sifre" name="sifre" class="form-control" placeholder="Şifrenizi belirleyin." required> 
            <i class="fa fa-eye parola pass" onClick="parolaGoster(this)"></i>
        </div>
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
<script>
    // 修改函数，通过图标定位对应输入框，摆脱id依赖
    function parolaGoster(el) {
        let x = el.parentElement.querySelector('input');
        if (x.type == "password") {
            x.type = "text";
            el.className = 'fa fa-eye-slash parola pass';
        } else {
            x.type = "password";
            el.className = 'fa fa-eye parola pass';
        }
    }
</script>
</body>
</html>

关键说明

  • 响应式宽度控制：使用w-100 w-sm-75 w-md-50实现不同尺寸适配：
    • w-100：默认（xs尺寸）宽度100%
    • w-sm-75：sm及以上尺寸宽度75%
    • w-md-50：md及以上尺寸宽度50%
  • 无id依赖的切换逻辑：通过el.parentElement.querySelector('input')直接定位当前图标对应的输入框，避免了重复id导致的元素定位错误，代码更健壮。

内容的提问来源于stack exchange，提问作者İbrahim Koçal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.23 09:37:10