แนวทางการซ่อนแสดงรหัสผ่านใน input password ด้วย jQuery อย่างง่าย

18 October 2018 เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee

:ซ่อนแสดงรหัสผ่าน jquery password

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ :ซ่อนแสดงรหัสผ่าน jquery password

UPDATE! อัพเดทล่าสุด 04-07-2020
04-07-2020 | ใช้วิธีการ swap type เพิ่มเติมที่ 1

แนวทางนี้ เราจะใช้สำหรับให้ผู้ใช้ สามารถที่จะเลือกดูได้ว่า รหัสผ่านที่กำลังกรอกอยู่นั้น กรอกถูกต้องหรือเป็นไปตามที่ต้องการหรือไม่
โดยปกติแล้ว 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