See the Pen Ẩn Và Hiển Thị Mật Khẩu by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Nếu bạn muốn tham khảo các html input password thì truy cập đường dẫn bên dưới nha. HTML Input Password
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo chức năng Ẩn và hiển thị mật khẩu cho việc phát triển, thiết kế web và nếu có thắc
mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký
Chào các bạn, hôm nay mình hướng dẫn tạo form đăng nhập vào trang web của mình bằng cách sử dụng javascript để hiển thị hoặc ẩn trường mật khẩu của người dùng. Hướng dẫn này khá đơn giản, vì chỉ là hiển thị khung đăng nhập cùng chức năng ẩn hoặc hiển thị mật khẩu thôi nhé. Nếu muốn các bạn có thể kết hợp các các code đăng nhập khác như:
Mẫu code đăng nhập bằng PHP với kết nối PDO.
Trong ví dụ này, nút để hiển thị hoặc ẩn mật khẩu của người dùng là 2 ảnh
SVG, tuy nhiên, bạn có thể thay thế chúng bằng hình ảnh hoặc icon mà bạn thích (Nếu để hình ảnh nên chọn svg nhé).
Mã CSS
Ví dụ
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M 0%2c276 C 57.6%2c235.6 172.8%2c99.4 288%2c74 C 403.2%2c48.6 460.8%2c147 576%2c149 C 691.2%2c151 748.8%2c84.4 864%2c84 C 979.2%2c83.6 1036.8%2c143 1152%2c147 C 1267.2%2c151 1382.4%2c112.6 1440%2c104L1440 560L0 560z' fill='%23184a7e'%3e%3c/path%3e%3cpath d='M 0%2c557 C 96%2c505 288%2c307.6 480%2c297 C 672%2c286.4 768%2c503.6 960%2c504 C 1152%2c504.4 1344%2c340 1440%2c299L1440 560L0 560z' fill='%232264ab'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-size: 100vw 100vh;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Open Sans", sans-serif;
}
form {
backdrop-filter: saturate(120%) blur(20px);
display: block;
height: fit-content;
max-width: 93%;
width: 400px;
border-radius: 12px;
margin: auto 0;
padding: 0 0 25px 0;
border: 1px solid gray;
}
form div {
padding: 20px 10px;
}
form #password {
padding: 5px 35px 5px 5px;
width: 190px;
}
form #showEye {
display: block;
fill: #fff;
transition: all 0;
}
form #hideEye {
display: none;
fill: #fff;
transition: all 0;
}
form input {
outline: none;
display: block;
border: 1px solid transparent;
margin: auto;
border-radius: 2px;
background: rgba(255, 255, 255, 0.1);
padding: 5px;
color: white;
width: 220px;
transition: all 0.2s ease-in-out;
}
form input:focus {
background: white;
color: black;
}
form input:focus::placeholder {
color: gray;
}
form input::placeholder {
color: white;
}
form input[type=submit] {
color: white;
background: rgba(255, 255, 255, 0.1);
margin: 10px auto auto auto;
cursor: pointer;
width: 120px;
}
form input[type=submit]:hover {
background: white;
color: black;
}
form input:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
form svg {
width: 18px;
height: 18px;
cursor: pointer;
float: right;
margin-top: -23px;
margin-right: 80px;
z-index: 4;
position: relative;
}
form h2 {
font-size: 2rem;
color: white;
text-align: center;
letter-spacing: 2px;
}
Bước tiếp theo là phần quan trọng nhất trong bài này - thiết lập javascript của chúng ta. Trước hết chúng ta phải hiểu quy trình mà chúng ta sẽ làm theo. Để hiển thị chuỗi ký tự của mật khẩu dữ liệu đầu vào, chúng ta phải thay thế nó bằng một văn bản dữ liệu đầu vào.
Mã
JS
Ví dụ
let password = document.getElementById('password');
let showEye = document.getElementById('showEye');
let hideEye = document.getElementById('hideEye');
function black(){
showEye.style.fill = "#000000";
hideEye.style.fill = "#000000";
}
function white(){
showEye.style.fill = "#fff";
hideEye.style.fill = "#fff";
}
function passwordShow(){
password.type = 'text';
showEye.style.display= "none";
hideEye.style.display= "inline";
password.focus();
}
function passwordHide(){
password.type = 'password';
showEye.style.display= "inline";
hideEye.style.display= "none";
password.focus();
}
Khi nhấp vào ảnh SVG để hiển thị hoặc ẩn mật khẩu, hai hàm JS sau sẽ được gọi: passwordShow() hoặc passwordHide().
