javascript Bootstrap d-xl-block密码隐藏/显示问题

q35jwt9p  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(155)

我做了d-xl-block，d-sm，block...根据尺寸，将我在Bootstrap中写的表格复制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>

期待您在这个问题上的帮助。

JavaScript

1条答案

按热度按时间
mklgxw1f

mklgxw1f1#

你一遍又一遍地输入同样的密码。JavaScript函数搜索第一个密码字段（因为您是按ID搜索的，ID应该（并且可以）只存在一个）。
合并来自以下的表单：

<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>

对此：

<form class="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>

应该能解决你的问题
这些类（d-sm-none，d-md-block等）都可以设置在同一个元素上。您可以在特定的屏幕尺寸上隐藏和显示特定的块，但是您不应该使用bootstrap为不同的屏幕尺寸复制一段代码。

赞(0）分享  回复(0）举报  2023-05-05
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com