แนวทางการซ่อนแสดงรหัสผ่านใน input password ด้วย jQuery อย่างง่าย
เขียนเมื่อ 4 ปีก่อน โดย Ninenik Narkdeepassword :ซ่อนแสดงรหัสผ่าน jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ password :ซ่อนแสดงรหัสผ่าน jquery
UPDATE! อัพเดทล่าสุด 04-07-2020
04-07-2020 | ใช้วิธีการ swap type เพิ่มเติมที่ 1
04-07-2020 | ใช้วิธีการ swap type เพิ่มเติมที่ 1
ไปที่ Copy
แนวทางนี้ เราจะใช้สำหรับให้ผู้ใช้ สามารถที่จะเลือกดูได้ว่า รหัสผ่านที่กำลังกรอกอยู่นั้น กรอกถูกต้องหรือเป็นไปตามที่ต้องการหรือไม่
โดยปกติแล้ว input password เราจะไม่ทราบเรากรอกข้อมูลรหัสผ่านถูกตามที่เราต้องการหรือไม่ ส่วนใหญ่จะใช้วิธีแก้ปํยญหา
โดยให้กรอกรหัสผ่านซ้ำอีกครั้งในอีกช่องรายการ แล้วตรวจสอบสอบ เพื่อยืนยันว่าผู้ใช้กรอกรหัสผ่านถูกตามที่ต้องการ
ตัวอย่างผลลัพธ์
สามารถนำไปประยุกต์ เพิ่มเติมตามต้องการได้
โดยปกติแล้ว input password เราจะไม่ทราบเรากรอกข้อมูลรหัสผ่านถูกตามที่เราต้องการหรือไม่ ส่วนใหญ่จะใช้วิธีแก้ปํยญหา
โดยให้กรอกรหัสผ่านซ้ำอีกครั้งในอีกช่องรายการ แล้วตรวจสอบสอบ เพื่อยืนยันว่าผู้ใช้กรอกรหัสผ่านถูกตามที่ต้องการ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <input type="password" name="obj1" class="pass_swap"> <input type="text" name="obj2" class="pass_swap" hidden> <button type="button" id="togglePass">Show</button> <script> $(function(){ $("#togglePass").on("click",function(){ var condCheck = $(this).text(); $(this).text((condCheck=='Show')?'Hide':'Show'); $(".pass_swap").toggle(); }); $(".pass_swap").on("change",function(){ $(".pass_swap").val($(this).val()); }); }); </script> </body> </html>
ตัวอย่างผลลัพธ์
สามารถนำไปประยุกต์ เพิ่มเติมตามต้องการได้
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 04-07-2020
ตัวอย่างเพิ่มเติม
<!doctype html> <html lang="th"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" > <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" > </head> <body> <div class="container mt-5 mx-auto"> <h2>ใช้วิธีการ Swap Type</h2> <input type="password" name="obj1" class="pass-swap"> <button type="button" class="btn-toggle-pass">Show</button> <hr class="my-3"> <h2>ใช้วิธีการ Swap Type กรณีใช้ร่วมกับ bootstrap และ fontawesome </h2> <div class="input-group mb-3"> <input type="password" class="form-control pass-swap" placeholder="Password"> <div class="input-group-append"> <button class="btn btn-light"> <i class="fa fa-eye"></i> </button> </div> </div> </div> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ // ใช้วิธีการ สลับ type $(document.body).on("click",".btn-toggle-pass",function(){ let ele = $(this).prev(".pass-swap"); let condCheck = $(this).text(); $(this).text((condCheck=='Show')?'Hide':'Show'); let swap_attr = (ele.attr("type")=="password")?"text":"password"; console.log(ele.attr("type")); ele.attr("type",swap_attr); }); // กรณีใช้ร่วมกับ bootstrap และ fontawesome $(document.body).on("click","[class*='fa-eye']",function(){ $(this).toggleClass("fa-eye-slash fa-eye"); let ele = $(this).closest(".input-group-append").siblings(".pass-swap"); let swap_attr = (ele.attr("type")=="password")?"text":"password"; ele.attr("type",swap_attr); }); }); </script> </body> </html>
ดูการทำงานได้ที่ DEMO
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()