คุณสมบัติ readOnly ของ HTML DOM Input Datetime

คุณสมบัติ readOnly ของ HTML DOM Input Datetime ใช้สำหรับกำหนดหรือตรวจสอบว่าช่องกรอกวันที่และเวลา (datetime) สามารถแก้ไขได้หรือไม่ หากตั้งค่าเป็น true ผู้ใช้จะไม่สามารถเปลี่ยนแปลงค่าได้ แต่ยังสามารถเลือกและคัดลอกได้

ไวยากรณ์ (Syntax)

การดึงค่า (คืนค่า boolean true/false)

inputDatetimeObject.readOnly

การกำหนดค่า readOnly

inputDatetimeObject.readOnly = booleanValue

ค่า Boolean (Boolean Values)

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

ตัวอย่างด้านล่างแสดงการตั้งค่า readOnly เป็น true เมื่อคลิกปุ่ม เพื่อป้องกันการเปลี่ยนแปลงวันที่สอบ:

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime readOnly</title>
</head>
<body>
<form>
  Final Exam Datetime: <input type="datetime" id="datetimeSelect" value="2023-08-24T10:30Z">
</form>
<button onclick="finalizeDatetime()">Confirm Datetime</button>
<div id="divDisplay"></div>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputDatetime = document.getElementById("datetimeSelect");
  divDisplay.textContent = 'Exam Datetime Finalized: ' + inputDatetime.readOnly;
  function finalizeDatetime() {
    inputDatetime.readOnly = true;
    divDisplay.textContent = 'Exam Datetime: ' + inputDatetime.value;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: ช่อง datetime แสดงค่าและสามารถแก้ไขได้ หลังคลิกปุ่ม Confirm Datetime: ช่อง datetime จะถูกล็อก (readOnly = true) และไม่สามารถแก้ไขค่าได้อีก

หมายเหตุ: คุณสมบัติ readOnly ต่างจาก disabled ที่ข้อมูลจะยังส่งไปกับฟอร์มเมื่อ submit ในขณะที่ disabled จะไม่ส่งข้อมูล