คุณสมบัติ HTML DOM Input Password readOnly

คุณสมบัติ readOnly ของ input type="password" ใช้ตั้งค่าหรือดึงค่า ว่าช่องรหัสผ่านเป็น อ่านอย่างเดียว (read-only) หรือไม่ Element ที่ read-only แก้ไขไม่ได้ แต่ยัง โฟกัสได้ (tab หรือคลิก) และ ค่าจะถูกส่งไปกับฟอร์ม ต่างจาก disabled

ไวยากรณ์ (Syntax)

การตั้งค่า readOnly:

passwordObject.readOnly = true|false

• true — ช่องรหัสผ่านเป็น read-only
• false — ปกติ (ค่าเริ่มต้น)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ readOnly ของ Password</h1>
รหัสผ่าน: <input type="password" id="PASS1">
<p>คลิกปุ่มเพื่อตั้งค่า readOnly เป็น true</p>
<button onclick="changeRead()">เปลี่ยน</button>
<script>
  function changeRead() {
    document.getElementById("PASS1").readOnly = true;
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: ช่องรหัสผ่านพิมพ์ได้ปกติ

หลังคลิก "เปลี่ยน": ช่องรหัสผ่านกลายเป็น read-only — พิมพ์ไม่ได้ แต่คลิก/tab โฟกัสได้ และค่าจะถูกส่งเมื่อ submit ฟอร์ม

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

• Password field: id="PASS1"
• ปุ่ม "เปลี่ยน" เรียก changeRead()
• ตั้งค่า .readOnly = true

ความแตกต่างระหว่าง readOnly และ disabled:

ใช้ readOnly เมื่อต้องการแสดงค่าที่แก้ไขไม่ได้แต่ต้องส่งไปเซิร์ฟเวอร์ (เช่น รหัสผ่านที่สร้างให้, token, ฯลฯ)