密码输入字段

Question

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

删除其他CSS / SCSS脚本
更改追加输入类。

此处我的问题演示在这里仅添加相关代码：

＆＃13;

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

＆＃13;

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

＆＃13;

真正有效的是什么？只有当我添加确切的bootstrap代码css眼睛工作，但这也使我的其他网站css搞砸了！演示我的意思：

＆＃13;

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

＆＃13;

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

＆＃13;

相关代码：

密码输入字段

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

我使用的Bootstrap 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 One输入：

＆＃13;

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

＆＃13;

JSFiddle使用Just Input字段

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

Answer 1

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

另外，请确保关闭所有代码。未封闭的标签可以对布局做出奇怪的事情。

这是一个工作小提琴：https://jsfiddle.net/sveynh3z/

Answer 2

很抱歉参加晚会，但我发现这里的某些片段似乎无法正常工作，所以这是我的片段。它有什么用吗？

如果在查看代码段时遇到错误（使用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>

Bootsrap显示密码，不起作用

密码输入字段

我使用的Bootstrap CDN CSS：

Demo Of One输入：

JSFiddle使用Just Input字段

2 个答案: