我正在尝试为表单中的密码输入创建一个“显示/隐藏”按钮。一切正常，除了我真的不知道如何将其转换为函数以将其应用于即时输入的任何密码之外。主要问题是我不必在函数内附加任何元素，因为其他插件使用额外的文本输入和标签来检测键入时的密码强度。
$(document).ready(function() {
"use strict"; // Start of use strict
if ($(window).width() < 700){
$('.password-button-main').on('click', function() {
$("#pass-on").hide();
$("#pass-off").show();
$('.password-button-main > i').removeClass('fa-eye-slash');
$('.password-button-main > i').addClass('fa-eye');
setTimeout(function(){
$("#pass-on").show();
$("#pass-off").hide();
$('.password-button-main > i').addClass('fa-eye-slash');
$('.password-button-main > i').removeClass('fa-eye');
}, 800);
});
$('.password-button-verify').on('click', function() {
$("#pass-verify-on").hide();
$("#pass-verify-off").show();
$('.password-button-verify > i').removeClass('fa-eye-slash');
$('.password-button-verify > i').addClass('fa-eye');
setTimeout(function(){
$("#pass-verify-on").show();
$("#pass-verify-off").hide();
$('.password-button-verify > i').addClass('fa-eye-slash');
$('.password-button-verify > i').removeClass('fa-eye');
}, 800);
});
} else {
$('.password-button-main').on('mousedown', function() {
$("#pass-on").hide();
$("#pass-off").show();
$('.password-button-main > i').removeClass('fa-eye-slash');
$('.password-button-main > i').addClass('fa-eye');
});
$('.password-button-main').on('mouseup', function() {
$("#pass-on").show();
$("#pass-off").hide();
$('.password-button-main > i').addClass('fa-eye-slash');
$('.password-button-main > i').removeClass('fa-eye');
});
$('.password-button-main').on('mouseout', function() {
$("#pass-on").show();
$("#pass-off").hide();
$('.password-button-main > i').addClass('fa-eye-slash');
$('.password-button-main > i').removeClass('fa-eye');
});
$('.password-button-verify').on('mousedown', function() {
$("#pass-verify-on").hide();
$("#pass-verify-off").show();
$('.password-button-verify > i').removeClass('fa-eye-slash');
$('.password-button-verify > i').addClass('fa-eye');
});
$('.password-button-verify').on('mouseup', function() {
$("#pass-verify-on").show();
$("#pass-verify-off").hide();
$('.password-button-verify > i').addClass('fa-eye-slash');
$('.password-button-verify > i').removeClass('fa-eye');
});
$('.password-button-verify').on('mouseout', function() {
$("#pass-verify-on").show();
$("#pas-verifys-off").hide();
$('.password-button-verify > i').addClass('fa-eye-slash');
$('.password-button-verify > i').removeClass('fa-eye');
});
}
$('#pass-on').on('focus', function(){
$('#pass-on').keyup(function() {
$('#pass-off').val($(this).val());
});
});
$('#pass-off').on('focus', function(){
$('#pass-off').keyup(function() {
$('#pass-on').val($(this).val());
});
});
$('#pass-verify-on').on('focus', function(){
$('#pass-verify-on').keyup(function() {
$('#pass-verify-off').val($(this).val());
});
});
$('#pass-verify-off').on('focus', function(){
$('#pass-verify-off').keyup(function() {
$('#pass-verify-on').val($(this).val());
});
});
}); // End of use strict/*
* Form input styling
*/
.form-group {
position: relative;
margin-bottom: 2rem;
}
.form-layout input[type="text"],
.form-layout input[type="password"],
.form-layout input[type="email"] {
/* font-size: 1.7rem;
height: 2.8rem; */
/* width: 100%; */
padding: 10px 0;
height: 2.8rem;
font-size: 1.7rem;
letter-spacing: 1px;
border: none;
border-bottom: 1px solid #d3d3d3;
background: transparent;
outline: none !important;
box-shadow: none !important;
border-radius: 0;
}
::-webkit-input-placeholder {
opacity: 0 !important;
}
:-moz-placeholder { /* Firefox 18- */
opacity: 0 !important;
}
::-moz-placeholder { /* Firefox 19+ */
opacity: 0 !important;
}
:-ms-input-placeholder {
opacity: 0 !important;
}
.form-layout label {
position: absolute;
top: -10px;
left: 0;
padding: 10px 0;
height: 2.5rem;
font-size: 1.7rem;
color: #6c757d;
letter-spacing: 1px;
pointer-events: none;
transition: .5s;
}
.form-layout input:focus,
.form-layout input:valid {
border-bottom: 1px solid #03a9f4;
}
.form-layout input:focus ~ label,
.form-layout input:valid ~ label {
top: -1.5rem;
left: 0;
color: #03a9f4;
font-size: .8rem;
}
/*
* Form password strength bar
*/
.jquery-result-1 {
border-radius: 0;
}
/*
* Form button styling
*/
.btn-form {
padding-top: 10px;
padding-bottom: 13px;
font-size: 1.3rem;
color: #fff;
background-color: #47a447;
border:none;
justify-content: center;
align-items: center;
display: flex;
width: 100%;
transition: 0.3s;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
outline: none !important;
cursor: pointer !important;
}
.btn-green {
background-color: #47a447;
}
.btn-orange {
background-color: #f4511e;
}
.btn-green:hover {
background-color: #67b647;
}
.btn-orange:hover {
background-color: #f0353c;
}
.btn-text {
margin-left: 5px;
}
/*
* Password show/hide button
*/
.password-button {
background-color: lightgray;
border-radius: 0 4px 4px 0;
outline: none;
cursor: pointer;
}
.password-button i {
padding: 14px 19px;
color: darkgray;
}
.password-button:hover > i {
color: #3a3a3a;
}<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-layout" method="post" id="login-form">
<h2 class="form-layout-heading"><i class="far fa-user-circle"></i></h2>
<div class="form-group">
<input type="text" class="form-control" name="txt_uname" placeholder="Enter Username" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->username_error; ?>')" oninput="setCustomValidity('')" required />
<label>Username</label>
</div>
<div class="form-group">
<input type="text" class="form-control" name="txt_umail" placeholder="Enter E-Mail" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->email_error; ?>')" oninput="setCustomValidity('')" required />
<label>E-mail</label>
</div>
<div class="form-group input-group">
<input type="password" id="pass-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass" placeholder="Enter Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
<input type="text" id="pass-off" title="<?php echo $user->valid_password_error; ?>" class="form-control" style="display: none;" placeholder="Enter Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
<label>Password</label>
<div class="input-group-append">
<span class="password-button password-button-main"><i class="fas fa-eye-slash"></i></span>
</div>
</div>
<div class="form-group progress jquery-result-1" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<div class="form-group input-group">
<input type="password" id="pass-verify-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass_ok" placeholder="Retype Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
<input type="text" id="pass-verify-off" title="<?php echo $user->valid_password_error; ?>" class="form-control" style="display: none;" placeholder="Retype Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
<label>Retype Password</label>
<div class="input-group-append">
<span class="password-button password-button-verify"><i class="fas fa-eye-slash"></i></span>
</div>
</div>
<button type="submit" name="btn-signup" class="btn-form btn-green">
<i class="fas fa-check"></i>
<span class="btn-text">Sign Up</span>
</button>
</form>
答案 0 :(得分：1)
您不需要具有两个不同的输入并显示/隐藏它们-只需在type和password之间切换密码输入的text。
（确实是人为设计的例子）
$(document).ready(function() {
let $pw = $('#password')
let $t = $('#toggle')
function setOriginalState() {
$pw.attr('type', 'password')
$t.text('Show')
}
$t.on('click', () => {
const isPw = $pw.attr('type') === 'password'
if (isPw) {
$pw.attr('type', 'text')
$t.text('Hide')
setTimeout(setOriginalState, 800)
} else {
setOriginalState()
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="password">
<button id="toggle">Show</button>
更新为了确保可以切换多个密码输入，您需要稍微调整一下逻辑。这是在每个按钮上使用自定义数据属性（[data-id]）来引用正确输入的一种方法。
function togglePasswordVisibility($pw, on) {
$pw.attr('type', on ? 'password' : 'text');
}
$(document).ready(function() {
$('[data-id]').on('click', function() {
const $this = $(this);
const id = $this.data('id')
const $pw = $(`#${id}`);
togglePasswordVisibility($pw, false);
$this.prop('disabled', true);
setTimeout(function() {
togglePasswordVisibility($pw, true);
$this.prop('disabled', false);
}, 800);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
<input type="password" id="password1">
<button data-id="password1">Show</button>
</div>
<div class="group">
<input type="password" id="password2">
<button data-id="password2">Show</button>
</div>
<div class="group">
<input type="password" id="password3">
<button data-id="password3">Show</button>
</div>
最终更新：
function togglePasswordVisibility($pw, on, $eye) {
$pw.attr('type', on ? 'password' : 'text');
$eye.toggleClass('fa-eye-slash fa-eye');
}
$("[type=password]").each(function () {
var $pw = $(this);
var $eye = $("<i>").addClass("fas fa-eye-slash").click(function () {
togglePasswordVisibility($pw, false, $eye);
setTimeout(function() {
togglePasswordVisibility($pw, true, $eye);
}, 800);
});
$pw.parent().append(
$("<div>").addClass("input-group-append").append(
$("<span>").addClass("password-button password-button-main").append($eye)
)
);
});
答案 1 :(得分：0)
要在JavasScript中创建函数，您可以：
function someName(someVariable) {
// Copy and paste your code here!
}
例如，这可能是HTML中的onclick事件和JS中的函数的组合：
<button onclick="toggleField(true, 'old')">Click me</button>
只要有人单击点击我，就会调用功能toggleField。在您的JS中：
function toggleField(bool, type) {
if (bool === true && type === 'old') {
$(this).show();
} else {
$(this).hide();
}
}