jquery - 如何在按钮元素上显示 div 内容?
问题描述
我有特定要求的密码输入字段。当用户单击输入字段div
元素时,将显示。问题是提交按钮显示在 div 中。我想知道如何在该按钮上显示 div ?这是示例:
$("input[type='password']").keyup(checkPsw).focus(function() {
$(".pswd_info").show();
}).blur(function() {
$(".pswd_info").hide();
});
function checkPsw() {
var pswd = $(this).val();
//validate the length
if (pswd.length < 8) {
$(this).closest(".panel-body").find(".length").removeClass('valid').addClass('invalid');
} else {
$(this).closest(".panel-body").find(".length").removeClass('invalid').addClass('valid');
}
//validate letter
if (pswd.match(/[a-z]/)) {
$(this).closest(".panel-body").find(".letter").removeClass('invalid').addClass('valid');
} else {
$(this).closest(".panel-body").find(".letter").removeClass('valid').addClass('invalid');
}
//validate capital letter
if (pswd.match(/[A-Z]/)) {
$(this).closest(".panel-body").find(".capital").removeClass('invalid').addClass('valid');
} else {
$(this).closest(".panel-body").find(".capital").removeClass('valid').addClass('invalid');
}
//validate special character
if (pswd.match(/(?=.*[?!@#$%^&*-])/)) {
$(this).closest(".panel-body").find(".character").removeClass('invalid').addClass('valid');
} else {
$(this).closest(".panel-body").find(".character").removeClass('valid').addClass('invalid');
}
//validate number
if (pswd.match(/\d/)) {
$(this).closest(".panel-body").find(".number").removeClass('invalid').addClass('valid');
} else {
$(this).closest(".panel-body").find(".number").removeClass('valid').addClass('invalid');
}
}
.pswd_info {
display: none;
position: absolute;
font-size: .875em;
}
.pswd_info::before {
content: "\25B2";
position: absolute;
top: -12px;
left: 45%;
font-size: 14px;
line-height: 12px;
color: #337ab7;
text-shadow: none;
display: block;
}
.pswd_info ul {
margin: 0;
padding: 0;
}
.pswd_info li {
list-style: none;
}
.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;
}
.message-submit {
display: none;
padding: 5px 15px !important;
margin: 0px !important;
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form name="frmMyaccount" id="frmMyaccount" class="submit-hearing" data-method="MyAccount" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="username"><span class="label label-primary">UserName</span></label>
<input type="text" class="form-control check-account" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
</div>
<div class="form-group">
<label class="control-label" for="password"><span class="label label-primary">Password</span></label>
<input type="password" class="form-control" name="frm_password" id="frm_password" placeholder="Enter Password" maxlength="64">
<small id="passwordHelp" class="form-text text-muted">Special characters allowed: <span class="text-danger"><b> ? ! @ # $ % ^ & * -</b></span></small>
<div class="panel panel-primary pswd_info">
<div class="panel-heading">
<h5>Password requirements:</h5>
</div>
<div class="panel-body">
<ul>
<li class="invalid letter">At least <strong>one letter</strong></li>
<li class="invalid capital">At least <strong>one capital letter</strong></li>
<li class="invalid number">At least <strong>one number</strong></li>
<li class="invalid character">At least <strong>one special character</strong></li>
<li class="invalid length">Be at least <strong>8 characters</strong></li>
</ul>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label" for="email"><span class="label label-primary">Email address</span></label>
<input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
<div id="frm_message" class="alert message-submit"></div>
</div>
</div>
</form>
如果您运行代码片段并单击密码输入字段,您将在显示密码要求的 div 内看到提交按钮。解决此问题的最佳方法是什么?
解决方案
将 z-index 添加到 pswd_info。在我的测试中 z-index:9999 有效。
.pswd_info {
display: none;
position: absolute;
font-size: .875em;
z-index:9999;
}
推荐阅读
- sql - missing FROM-clause entry for table "g"
- r - 如何使用 R 获取 csv 文件中数字变量的计数
- sql - 数据字典可用于检索审计结果
- python - 跨多个进程是否共享 numpy 数组?
- ns2 - ns2 失败并出现“调用类 $cls 时出错:$args”$...”
- c# - MySqlConnection 线程优化
- android - Android 上的 DocuemntSnapshot 是一个迟到的结果
- java - 如何在java中从可变对象创建不可变对象?
- java - 在片段中获取 TabLayout 视图返回 NullPointerException
- reactjs - 如何在反应库中生成像 component_cssclass_uniquekey 这样的模块化 CSS 键