Bootstrap 显示密码，不工作

【问题标题】：Bootsrap Show Password, Not WorkingBootstrap 显示密码，不工作
【发布时间】：2017-10-29 23:53:34
【问题描述】：

我的引导程序显示密码眼睛图标有问题，只出现了一半我已经尝试了所有我能想到的方法，包括以下内容：

  • 删除其他 CSS/SCSS 脚本

  • 更改附加输入类。

这是我的问题演示，仅在下面添加相关代码：

				
				  
				  <style type="text/scss">
					@import url(http://fonts.googleapis.com/css?family=Lobster);


#page {
  margin: 0 15px;
  padding-top: 30px;
		width: 25vw;
			
}

label {
    font-size: 0.875em;
					width: 25vw;

}



// Error Messages - front end validation
.form-group.error {
    
    label.error {
        margin-top: 5px;
        color: #ee4141;   
    }
}

// Pod
// --------------------------------------------------


// Password Creation Info Box
// --------------------------------------------------
#password-info {
	margin: 20px 0;
	overflow: hidden;
	text-shadow: 0 1px 0 #fff;
	ul {
		list-style: none;
		margin: 0;
        padding: 0;
		li {
			padding: 10px 10px 10px 50px;
            margin-bottom: 1px;
            background: #f4f4f4;
			font-size: 12px;
			transition: 250ms ease;
            position: relative;
			.icon-container {
				display: inline;
				width: 50px;
				background: lighten(#428bca, 20%);
				position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                text-align: center;
				.fa {
					color: white;
                    padding-top: 10px;
                    position: relative;
                    top: 2px;
				}
			}
			.tip {
				color: #5ca6d5;
				text-decoration: underline;
			}
			&.valid {
				.icon-container {
					background-color: #18c36b;
				}
				color: darken(#18c36b, 10%);
			}
			span.invalid {
				color: #ff642e;
			}
		}
	}
}
				  </style>
	
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom fonts for this template-->
  <link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template-->
  <!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
  <script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
  <script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
  <script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
  <!-- Core plugin JavaScript-->
  <script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
  <style>
	leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
	sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
			  </style>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
  <center><div class="container">
	<div class="form-group">
          
        </div>
    <div class="card card-register mx-auto mt-5">
      <div class="card-header">Register an Account <br> 				  <p>Already a member? <a href='login.php' class="" name="login" id="login">Login</a></p>
</div>
      <div class="card-body">
        <form>
				<div class="form-group">
					<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
				<div class="form-group">
					<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
				</div>
				<div class="row">
					<div class="col-xs-6 col-sm-6 col-md-6">
						<div class="form-group">
							<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
					  
            <form class="validate-password" method="post" action="#">
              <fieldset class="fieldset-password">
                <!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
                <p>All checkmarks must turn green in order to proceed</p>-->
                <div id="password-info">
                  <ul>
                    <li id="length" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                      At least 6 characters
                    </li>
                    <li id="capital" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                      At least 1 uppercase letter
                    </li>
                    <li id="lowercase" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                      At least 1 lowercase letter
                    </li>
                    <li id="number" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                     <span> At least 1 number</span>
					</li>
					  <li id="special" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                     <span> At least 1 symbol</span>
                    </li>
                  </ul>
                </div>
               
				
			  
						  
						  						</div>
					</div>
					<div class="col-xs-7 col-sm-6 col-md-6">
						<div class="form-group">
							<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
						</div>
					</div>
				</div>
					  <style>
#submit , #login {
display:inline-block;
/**other codes**/
}
					  </style>
				<div class="row" id="submits">

				<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
				
				</div>
				  </div>
			</form>
	

		  </div></center>

  
<script type="text/javascript">
	$("#password").password('toggle');
</script>

真正起作用的是什么？只有当我添加确切的引导代码 css 时，眼睛才能工作，但这也会让我的其他网站 css 搞砸了！演示我的意思：

<style type="text/scss">
					@import url(http://fonts.googleapis.com/css?family=Lobster);


#page {
  margin: 0 15px;
  padding-top: 30px;
		width: 25vw;
			
}

label {
    font-size: 0.875em;
					width: 25vw;

}



// Error Messages - front end validation
.form-group.error {
    
    label.error {
        margin-top: 5px;
        color: #ee4141;   
    }
}

// Pod
// --------------------------------------------------


// Password Creation Info Box
// --------------------------------------------------
#password-info {
	margin: 20px 0;
	overflow: hidden;
	text-shadow: 0 1px 0 #fff;
	ul {
		list-style: none;
		margin: 0;
        padding: 0;
		li {
			padding: 10px 10px 10px 50px;
            margin-bottom: 1px;
            background: #f4f4f4;
			font-size: 12px;
			transition: 250ms ease;
            position: relative;
			.icon-container {
				display: inline;
				width: 50px;
				background: lighten(#428bca, 20%);
				position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                text-align: center;
				.fa {
					color: white;
                    padding-top: 10px;
                    position: relative;
                    top: 2px;
				}
			}
			.tip {
				color: #5ca6d5;
				text-decoration: underline;
			}
			&.valid {
				.icon-container {
					background-color: #18c36b;
				}
				color: darken(#18c36b, 10%);
			}
			span.invalid {
				color: #ff642e;
			}
		}
	}
}
				  </style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom fonts for this template-->
  <link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template-->
  <!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
  <script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
  <script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
  <!-- Core plugin JavaScript-->
  <script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
  <style>
	leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
	sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
			  </style>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
  <center><div class="container">
	<div class="form-group">
          
        </div>
    <div class="card card-register mx-auto mt-5">
      <div class="card-header">Register an Account <br> 				  <p>Already a member? <a href='login.php' class="" name="login" id="login">Login</a></p>
</div>
      <div class="card-body">
        <form>
				<div class="form-group">
					<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
				<div class="form-group">
					<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
				</div>
				<div class="row">
					<div class="col-xs-6 col-sm-6 col-md-6">
						<div class="form-group">
							<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
					  
            <form class="validate-password" method="post" action="#">
              <fieldset class="fieldset-password">
                <!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
                <p>All checkmarks must turn green in order to proceed</p>-->
                <div id="password-info">
                  <ul>
                    <li id="length" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                      At least 6 characters
                    </li>
                    <li id="capital" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                      At least 1 uppercase letter
                    </li>
                    <li id="lowercase" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                      At least 1 lowercase letter
                    </li>
                    <li id="number" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                     <span> At least 1 number</span>
					</li>
					  <li id="special" class="invalid clearfix">
                      <span class="icon-container">
                        <i class="fa fa-check" aria-hidden="true"></i>
                      </span>
                     <span> At least 1 symbol</span>
                    </li>
                  </ul>
                </div>
               
				
			  
						  
						  						</div>
					</div>
					<div class="col-xs-7 col-sm-6 col-md-6">
						<div class="form-group">
							<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
						</div>
					</div>
				</div>
					  <style>
#submit , #login {
display:inline-block;
/**other codes**/
}
					  </style>
				<div class="row" id="submits">

				<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
				
				</div>
				  </div>
			</form>
	

		  </div></center>

  
<script type="text/javascript">
	$("#password").password('toggle');
</script>

相关代码：

密码输入栏

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <div class="form-group">
            <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100" data-toggle="password">
</div>
    </div>
       </div>

我使用的引导 CDN CSS：

<style>
    leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-
    eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-
    warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-
    plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
    sign:before{content:"\e101"}.glyphicon-
    gift:before{content:"\e102"}.glyphicon-
    leaf:before{content:"\e103"}.glyphicon-
    fire:before{content:"\e104"}.glyphicon-eye-
    open:before{content:"\e105"}.glyphicon-eye-
    close:before{content:"\e106"}.glyphicon-warning-
    sign:before{content:"\e107"}.glyphicon-
    plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>

Demo Of just The one input:

<style>
	leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
	sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
			  </style>
        <link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://antimalwareprogram.co/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
  <center><div class="container">
	
    <div class="card card-register mx-auto mt-5">
     
      <div class="card-body">
        <form>
				
				
				<div class="row">
					<div class="col-xs-6 col-sm-6 col-md-6">
						<div class="form-group">
							<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">

JSFiddle 只需输入字段

注意： 仅在启用广告拦截器时有效，但此时仅显示表情符号！
另一个注意事项： 使用 Font Awesome，它不会显示任何带有广告拦截器的东西，但没有它仍然是半个眼睛！

【问题讨论】：

  • 你没有关闭你的&lt;div&gt;s，这可能是搞砸了。
  • 我确实尝试过一次，但这只会让事情变得更糟。

标签： javascript html validation input bootstrap-4


【解决方案1】：

您包含的引导 css 与您包含的 JS 不同。使用官方CDN：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

另外，请确保关闭所有标签。未闭合的标签会对布局产生奇怪的影响。

这是一个有效的小提琴：https://jsfiddle.net/sveynh3z/

【讨论】：

    【解决方案2】：

    很抱歉迟到了，但我发现这里的一些 sn-ps 似乎工作不正常，所以这是我的。应该有什么用。

    如果您在查看 sn-p（使用 Chrome）时遇到错误，please use the JSFiddle.

    var timeoutId = 0;

    $('#check').on('mousedown', function() {
        $('#eye').removeClass( "glyphicon glyphicon-eye-close" );
        $('#eye').addClass( "glyphicon glyphicon-eye-open" );
        $('#password').attr('type', 'text');
        timeoutId = setTimeout(1000);
    }).on('mouseup mouseleave', function() {
        $('#password').attr('type', 'password');
        $('#eye').removeClass( "glyphicon glyphicon-eye-open" );
        $('#eye').addClass( "glyphicon glyphicon-eye-close" );
        clearTimeout(timeoutId);

    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h3>Show Password Example:</h3>
      <div class="input-group">
        <input type="password" id="password" class="form-control">
        <span class="input-group-btn">
                      <button class="btn btn-default" type="button" id="check"><span id="eye" class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></button>
        </span>
      </div>
      <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
  </div>
</div>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2019-02-01
      • 2021-12-14
      • 2018-01-05
      • 1970-01-01
      • 1970-01-01
      • 2017-07-12
      • 1970-01-01
      • 2018-09-03
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode