|
简化下注册项目,干掉(隐藏)注册密码二次确认文本框。实际输错密码的情况极少,万一输错了还有密保邮箱不是,所以个人觉得可以省略哈
效果如图:
用JS隐藏掉确认框并同步密码输入即可,顺便加了个显示密码的切换按钮,不方向输入是否正确时可以点击显示,人性化设计有木有
DEMO:https://cn.admxn.com/member.php?mod=register
食用方法:
将下方JS代码拷贝到你当前模板的注册页面模板文件register.htm底部即可,默认路径是\template\default\member\register.htm
<script>
// 查找所有type为password的input元素
const passwordInputs = document.querySelectorAll('input[type="password"]');
// 找到第二个密码框所在的div并将其隐藏
let parentDiv = passwordInputs[1].parentNode;
while (parentDiv.tagName !== 'DIV') {
parentDiv = parentDiv.parentNode;
}
parentDiv.style.display = 'none';
// 监听第一个密码框的输入事件
passwordInputs[0].addEventListener('input', function() {
// 将第一个密码框的值同步到第二个密码框
passwordInputs[1].value = passwordInputs[0].value;
});
// 显示密码
const buttonHtml = '<span id="showPasswordButton" class="fas fa-eye"></span>';
passwordInputs[0].insertAdjacentHTML('afterend', buttonHtml);
const showPasswordButton = document.getElementById('showPasswordButton');
let isPasswordVisible = false;
showPasswordButton.addEventListener('click', function() {
isPasswordVisible = !isPasswordVisible;
if (isPasswordVisible) {
// 切换为文本类型,密码可见
passwordInputs[0].type = 'text';
showPasswordButton.classList.remove('fa-eye');
showPasswordButton.classList.add('fa-eye-slash');
} else {
// 切换回密码类型,密码隐藏
passwordInputs[0].type = 'password';
showPasswordButton.classList.remove('fa-eye-slash');
showPasswordButton.classList.add('fa-eye');
}
});
</script>
|
|