แสดง/ซ่อน รหัสผ่าน HTML ด้วย JavaScript

แสดง/ซ่อน รหัสผ่าน HTML ด้วย JavaScript บทความนี้สอนเขียน JavaScript ร่วมกับ HTML เพื่อเขียนโค้ดซ่อน และแสดงรหัสผ่านของช่อง input type password เมื่อผู้ใช้งานกดติ๊กที่ checkbox สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง แสดง/ซ่อน รหัสผ่าน HTML ด้วย JavaScript

<input type="password" value="1234567890" id="pw">
<div style="margin-top:.5rem"><input type="checkbox" onclick="togglePassword()"> แสดงรหัสผ่าน</div>

<script>
    function togglePassword() {
        var pw = document.getElementById("pw");
        ( pw.type === "password" ) ? pw.type = "text": pw.type = "password";
    }
</script>

แสดง/ซ่อน รหัสผ่าน HTML ด้วย JavaScript เมื่อผู้ใช้งานกดติ๊กเลือก checkbox แสดงรหัสผ่าน โปรแกรมจะเข้าทำงานในฟังก์ชัน togglePassword จากนั้นอ้างถึง input type password ด้วย id = pw และใช้คำสั่ง if แบบย่อเช็คถ้า type ของ input เป็น password ให้เปลี่ยน type เป็น text เพื่อแสดงรหัสผ่าน กลับกันถ้า type เป็น text ให้เปลี่ยนเป็น password เพื่อซ่อนรหัสผ่าน