คุณสมบัติ readOnly ของ HTML DOM Input Date ใช้ตั้งค่า/คืนค่าว่า Input Date สามารถแก้ไขได้หรือไม่
รูปแบบไวยากรณ์ (Syntax)
- การคืนค่าบูลีน - true/false
inputDateObject.readOnly
- การตั้งค่า readOnly เป็น booleanValue
inputDateObject.readOnly = booleanValue
ค่าบูลีนที่เป็นไปได้
ในที่นี้ “booleanValue” สามารถเป็นค่าต่อไปนี้ได้:
| booleanValue | รายละเอียด |
|---|---|
| true | กำหนดว่า input date เป็น readOnly |
| false | กำหนดว่า input date ไม่ใช่ readOnly และสามารถแก้ไขได้ |
ตัวอย่าง
ตัวอย่างการใช้งานคุณสมบัติ Input Date readOnly:
<!DOCTYPE html> <html> <head> <title>Input Date readOnly</title> </head> <body> <form> วันที่สอบปลายภาค: <input type="date" id="dateSelect"> </form> <button onclick="finalizeDate()">ยืนยันวันที่</button> <div id="divDisplay"></div> <script> var divDisplay = document.getElementById("divDisplay"); var inputDate = document.getElementById("dateSelect"); divDisplay.textContent = 'วันที่สอบถูกยืนยัน: '+inputDate.readOnly; function finalizeDate() { inputDate.readOnly = true; divDisplay.textContent = 'วันที่สอบ: '+inputDate.value; } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้:
ก่อนคลิกปุ่ม 「ยืนยันวันที่」 :
หลังคลิกปุ่ม 「ยืนยันวันที่」 :
