用javascript写注册秘密,后面会有隐藏和叉号提示
时间: 2024-10-25 15:16:45 浏览: 23
在JavaScript中,为了创建一个简单的注册表单,其中包含一个密码输入字段带有隐藏和显示密码的提示功能,你可以使用HTML、CSS和JavaScript结合。下面是一个基础的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.password-toggle {
display: none;
}
</style>
</head>
<body>
<form id="registerForm">
<label for="username">用户名:</label><br>
<input type="text" id="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" onfocus="showPassword()" onblur="hidePassword()">
<span class="password-toggle">(显示)</span><br>
<button type="submit">注册</button>
</form>
<script>
function showPassword() {
document.getElementById('password').type = 'text';
document.querySelector('.password-toggle').style.display = 'inline';
}
function hidePassword() {
if (!document.getElementById('password').value) {
document.getElementById('password').type = 'password';
document.querySelector('.password-toggle').style.display = 'none';
}
}
</script>
</body>
</html>
```
在这个例子中,当用户点击密码框时,`showPassword()`函数会改变密码输入类型的样式为文本,同时显示隐藏的提示;当用户失去焦点(即离开输入框)时,`hidePassword()`函数会检查输入是否为空,如果为空则恢复为密码输入并隐藏提示。
阅读全文