Khái quát
Có thể nói form đăng ký và đăng nhập trong lập tình web không còn xa lạ với bất kì một ai làm lập trình viên nửa, những form này giúp cho người dùng có thể đăng nhập vào hệ thống để thực hiện những tác vụ khác nhau liên quan đến quyền và lợi ích của họ, những công việc đó là những công việc yêu cầu định danh chứ không phải bất cứ ai muốn củng được làm.
Chức năng hiện mật khẩu lên trong những form này sẽ giúp người dùng xác định được họ vừa nhập gì, kiểm tra dể dàng hơn nếu gặp sự cố báo mật khẩu không đúng, kiểm tra lần nửa xem chắc chắn đây có phải là mật khẩu mà mình chọn từ đó giúp thao tác người dùng dể dàng, tường minh và tiết kiệm thời gian hơn.
Cách tạo chức năng ẩn hiện mật khẩu với Javascript
Trên thực tế hành vi này rất đơn giản. Chúng ta cùng nhau xác định format của input trong HTML như thế này.
Với input ở HTML có type = password thì nó sẽ luôn luôn ẩn mật khẩu của chúng ta đi và thay bằng dấu sao để che nội dung đi.
Với input ở HTML có type = text thì nó sẽ luôn hiện đầy đủ nội dung mình vừa nhập.
Đây chính là điểm mấu chốt, hiểu được nguyên lí này thì ở đây việc chúng ta cần làm đơn giản là thay đổi type của hộp input HTML này từ password sang text nếu muốn nó hiện lên và ngược lại.
Đoạn code ẩn hiện mật khẩu trong form đăng nhập HTML CSS Javascript được mô tả như sau:
let password = document.getElementById('password');
if(password.type == 'text'){
password.type = 'password';
}else{
password.type = 'text';
}
Hoặc ngắn gọn hơn:
let password = document.getElementById('password');
password.type = password.type == 'text' ? 'password' : 'text';
Hai đoạn code trên là như nhau tuy nhiên với cách viết bên dưới sẽ ngắn gọn và gọn gàng hơn cho người đọc code, trước dấu chấm hỏi chính là câu điều kiện sau dấu chấm hỏi chính là giá trị trả về nếu đúng và sau dấu hai chấm là trường hợp else trong javascript.
Xem video hướng dẩn Ẩn hiện mật khẩu trong form đăng nhập HTML CSS Javascript chi tiết
Các liên kết được sử dụng trong video
Code trong video
Kết luận
Vậy là chỉ cần nắm bắt được nguyên lí hoạt động của input HTML ta dể dàng tạo ra được chức năng Ẩn hiện mật khẩu trong form đăng nhập HTML CSS Javascript chỉ bằng việc thay đổi giá trị thuộc tính của input password thành text. Mong rằng bài viết này sẽ có ích dành cho bạn. Chúc bạn một ngày tốt lành.