คุณสมบัติ defaultValue ของ Input Password ใน HTML DOM

คุณสมบัติ defaultValue ของ Input Password ใน HTML DOM ใช้สำหรับตั้งค่าหรือดึงค่าเริ่มต้น (default value) ของช่องรหัสผ่าน ค่าเริ่มต้นคือค่าที่กำหนดในแอตทริบิวต์ value ความแตกต่างระหว่าง value และ defaultValue คือ defaultValue จะเก็บค่าเริ่มต้นเดิมไว้ ในขณะที่ value จะเปลี่ยนตามสิ่งที่ผู้ใช้พิมพ์

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ defaultValue:

passwordObject.defaultValue = value

value คือค่าเริ่มต้นของช่องรหัสผ่าน

ตัวอย่าง

ตัวอย่างการเปลี่ยนค่าเริ่มต้นของช่องรหัสผ่าน:

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ defaultValue ของ Input Password</h1>
Password: <input type="password" id="PASS" value="abcd123">
<p>คลิกปุ่ม CHANGE เพื่อเปลี่ยนค่าเริ่มต้นของช่องรหัสผ่านข้างบน</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
  function changeDefault() {
    document.getElementById("PASS").defaultValue = "Password1234";
    var defaultVal = document.getElementById("PASS").defaultValue;
    document.getElementById("Sample").innerHTML = "ค่าเริ่มต้นเปลี่ยนจาก abcd123 เป็น " + defaultVal;
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บ ช่องรหัสผ่านมีค่าเริ่มต้น "abcd123" (แต่แสดงเป็นจุดเพราะเป็น password)

เมื่อคลิกปุ่ม "CHANGE" จะแสดง "ค่าเริ่มต้นเปลี่ยนจาก abcd123 เป็น Password1234"

คำอธิบายโค้ด

• สร้างช่องรหัสผ่าน id="PASS" มี value="abcd123"
• สร้างปุ่ม "CHANGE" เรียกใช้ changeDefault() เมื่อคลิก
• ฟังก์ชัน changeDefault() ตั้งค่า .defaultValue = "Password1234"
• อ่านค่า .defaultValue ใหม่ เก็บใน defaultVal แล้วแสดงในย่อหน้า id="Sample"
• หมายเหตุ: การเปลี่ยน defaultValue ไม่เปลี่ยนค่าที่แสดงอยู่ (value) จนกว่าจะรีเซ็ตฟอร์ม