คุณสมบัติ readOnly ของ HTML DOM Input Text ใช้สำหรับตั้งค่าหรือส่งคืนว่าช่องข้อความ input เป็น read-only หรือไม่ คุณสมบัติ readOnly ทำให้องค์ประกอบไม่สามารถแก้ไขได้ แต่ยังสามารถโฟกัสได้ด้วยแท็บหรือคลิก หากมีค่าเริ่มต้นในองค์ประกอบ read-only จะถูกส่งไปยังเซิร์ฟเวอร์เมื่อ submit
ไวยากรณ์
ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ readOnly:
textObject.readOnly = true|false
ที่นี่ true แทนว่าช่องข้อความเป็น read-only ในขณะที่ false แทนตรงข้าม คุณสมบัติ readOnly ตั้งค่าเป็น false โดยค่าเริ่มต้น
ตัวอย่าง
มาดูตัวอย่างสำหรับคุณสมบัติ readOnly ของ Input Text:
<!DOCTYPE html> <html> <body> <h1>Input Text readOnly property</h1> USERNAME: <input type="text" id="USR" > <p>เปลี่ยนคุณสมบัติ readOnly ของช่องด้านบนโดยคลิกปุ่มด้านล่าง</p> <button onclick="changeRead()">CHANGE</button> <script> function changeRead() { document.getElementById("USR").readOnly = true; } </script> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
เมื่อคลิกปุ่ม CHANGE ตอนนี้คุณไม่สามารถเปลี่ยนข้อความได้และจะถูกส่งไปยังเซิร์ฟเวอร์เมื่อ submit:
