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

18 October 2018 By Ninenik Narkdee

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

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ :ซ่อนแสดงรหัสผ่าน jquery 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>

ตัวอย่างผลลัพธ์

สามารถนำไปประยุกต์ เพิ่มเติมตามต้องการได้

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ