如何在密碼輸入字段旁邊顯示 div？

Question

我正在嘗試在輸入字段旁邊顯示密碼驗證框。 此邏輯有效，但具有所有密碼要求的 Box 未顯示在正確位置。 它不是放置在場地旁邊，而是顯示在場地上方。 這是示例：

 $('input[type=password]').keyup(function() { var pswd = $(this).val(); //validate the length if ( pswd.length < 8 ) { $('#length').removeClass('valid').addClass('invalid'); } else { $('#length').removeClass('invalid').addClass('valid'); } //validate letter if ( pswd.match(/[Az]/) ) { $('#letter').removeClass('invalid').addClass('valid'); } else { $('#letter').removeClass('valid').addClass('invalid'); } //validate capital letter if ( pswd.match(/[AZ]/) ) { $('#capital').removeClass('invalid').addClass('valid'); } else { $('#capital').removeClass('valid').addClass('invalid'); } //validate number if ( pswd.match(/\\d/) ) { $('#number').removeClass('invalid').addClass('valid'); } else { $('#number').removeClass('valid').addClass('invalid'); } }).focus(function() { $('#pswd_info').show(); }).blur(function() { $('#pswd_info').hide(); });

 .form-group.required .control-label:after { content: "*"; color: red; } #pswd_info { position:absolute; bottom:-75px; bottom: -115px\\9; /* IE Specific */ right:55px; width:250px; padding:15px; background:#fefefe; font-size:.875em; border-radius:5px; box-shadow:0 1px 3px #ccc; border:1px solid #ddd; } #pswd_info h4 { margin:0 0 10px 0; padding:0; font-weight:normal; } #pswd_info::before { content: "\\25B2"; position:absolute; top:-12px; left:45%; font-size:14px; line-height:14px; color:#ddd; text-shadow:none; display:block; } .invalid { background:url(../images/invalid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#ec3f41; } .valid { background:url(../images/valid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#3a7d34; } #pswd_info { display:none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <form> <div class="form-group required"> <label class="control-label" for="fname">First Name</label> <input type="text" class="form-control" name="temp_fname" id="temp_fname" placeholder="Enter First Name" maxlength="50" required> </div> <div class="form-group required"> <label class="control-label" for="lname">Last Name</label> <input type="text" class="form-control" name="temp_lname" id="temp_lname" placeholder="Enter Last Name" maxlength="50" required> </div> <div class="form-group required"> <label class="control-label" for="username">UserName</label> <input type="text" class="form-control" name="temp_username" id="temp_username" placeholder="Enter UserName" maxlength="50" required> </div> <div class="form-group required"> <label class="control-label" for="password">Password</label> <input type="password" class="form-control" name="temp_password" id="temp_password" placeholder="Enter Password" maxlength="64" required> <small id="passwordHelp" class="form-text text-muted">Special characters are allowd: <span class="text-danger">!"#$%&'()*+,-.:;<=>?@[\\]^_`{|}~</span></small> </div> <div class="form-group required"> <label class="control-label" for="email">Email address</label> <input type="email" class="form-control" name="temp_email" id="temp_email" placeholder="Enter email" maxlength="80" required> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div id="pswd_info"> <h4>Password must meet the following requirements:</h4> <ul> <li id="letter" class="invalid">At least <strong>one letter</strong></li> <li id="capital" class="invalid">At least <strong>one capital letter</strong></li> <li id="number" class="invalid">At least <strong>one number</strong></li> <li id="length" class="invalid">Be at least <strong>8 characters</strong></li> </ul> </div>

有沒有辦法在密碼輸入字段旁邊顯示密碼框？ 如果框位於輸入字段的右側，框上的箭頭也可以從框的左側指向嗎？ 應該替換項目符號的圖像存在問題。 我不確定為什么會顯示項目符號和圖像。 只有圖像應該在那里。 如果有人看到為什么我的代碼被破壞，請告訴我。

Answer 1

嘗試這個：

 $('input[type=password]').keyup(function() { var pswd = $(this).val(); //validate the length if ( pswd.length < 8 ) { $('#length').removeClass('valid').addClass('invalid'); } else { $('#length').removeClass('invalid').addClass('valid'); } //validate letter if ( pswd.match(/[Az]/) ) { $('#letter').removeClass('invalid').addClass('valid'); } else { $('#letter').removeClass('valid').addClass('invalid'); } //validate capital letter if ( pswd.match(/[AZ]/) ) { $('#capital').removeClass('invalid').addClass('valid'); } else { $('#capital').removeClass('valid').addClass('invalid'); } //validate number if ( pswd.match(/\\d/) ) { $('#number').removeClass('invalid').addClass('valid'); } else { $('#number').removeClass('valid').addClass('invalid'); } }).focus(function() { $('#pswd_info').show(); }).blur(function() { $('#pswd_info').hide(); });

 .form-group.required .control-label:after { content: "*"; color: red; } .password-container { position: relative; } #pswd_info { position:absolute; top: 85px; left: 25px; width:250px; padding:15px; background:#fefefe; font-size:.875em; border-radius:5px; box-shadow:0 1px 3px #ccc; border:1px solid #ddd; } #pswd_info h4 { margin:0 0 10px 0; padding:0; font-weight:normal; } #pswd_info::before { content: "\\25B2"; position:absolute; top:-12px; left:45%; font-size:14px; line-height:14px; color:#ddd; text-shadow:none; display:block; } .invalid { background:url(../images/invalid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#ec3f41; } .valid { background:url(../images/valid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#3a7d34; } #pswd_info { display:none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <form> <div class="form-group required"> <label class="control-label" for="fname">First Name</label> <input type="text" class="form-control" name="temp_fname" id="temp_fname" placeholder="Enter First Name" maxlength="50" required> </div> <div class="form-group required"> <label class="control-label" for="lname">Last Name</label> <input type="text" class="form-control" name="temp_lname" id="temp_lname" placeholder="Enter Last Name" maxlength="50" required> </div> <div class="form-group required"> <label class="control-label" for="username">UserName</label> <input type="text" class="form-control" name="temp_username" id="temp_username" placeholder="Enter UserName" maxlength="50" required> </div> <div class="form-group required password-container"> <label class="control-label" for="password">Password</label> <input type="password" class="form-control" name="temp_password" id="temp_password" placeholder="Enter Password" maxlength="64" required> <small id="passwordHelp" class="form-text text-muted">Special characters are allowd: <span class="text-danger">!"#$%&'()*+,-.:;<=>?@[\\]^_`{|}~</span></small> <div id="pswd_info"> <h4>Password must meet the following requirements:</h4> <ul> <li id="letter" class="invalid">At least <strong>one letter</strong></li> <li id="capital" class="invalid">At least <strong>one capital letter</strong></li> <li id="number" class="invalid">At least <strong>one number</strong></li> <li id="length" class="invalid">Be at least <strong>8 characters</strong></li> </ul> </div> </div> <div class="form-group required"> <label class="control-label" for="email">Email address</label> <input type="email" class="form-control" name="temp_email" id="temp_email" placeholder="Enter email" maxlength="80" required> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div>

• 我將彈出窗口的位置移動到保存密碼的塊內。
• 我將包含塊的position設置為相對。 這允許孩子相對於這個塊定位而不移動塊
• 我將 CSS 更改為基於新父塊的位置