ออบเจ็กต์ HTML DOM Input Text เกี่ยวข้องกับองค์ประกอบ <input> ที่มี type “text” เราสามารถสร้างและเข้าถึงองค์ประกอบ input ที่มี type text โดยใช้เมธอด createElement() และ getElementById() ตามลำดับ
คุณสมบัติ
คุณสมบัติต่อไปนี้สำหรับออบเจ็กต์ text:
| คุณสมบัติ | คำอธิบาย |
|---|---|
| autocomplete | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ autocomplete ของช่องข้อความ |
| Autofocus | ตั้งค่าหรือส่งคืนว่าช่องข้อความควรได้รับโฟกัสอัตโนมัติเมื่อโหลดหน้า |
| defaultValue | ตั้งค่าหรือส่งคืนค่าเริ่มต้นของช่องข้อความ |
| Disabled | ตั้งค่าหรือส่งคืนว่าช่องข้อความถูกปิดใช้งานหรือไม่ |
| Form | ส่งคืนการอ้างอิงของฟอร์มที่มีช่องข้อความ |
| maxLength | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ maxlength ของช่องข้อความ |
| name | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ name ของช่องข้อความ |
| pattern | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ pattern ของช่องข้อความ |
| placeholder | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ placeholder ของช่องข้อความ |
| readOnly | ตั้งค่าหรือส่งคืนว่าช่องข้อความเป็น read-only หรือไม่ |
| required | ตั้งค่าหรือส่งคืนว่าจำเป็นต้องกรอกช่องข้อความก่อนส่งฟอร์มหรือไม่ |
| size | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ size ของช่องข้อความ |
| type | คุณสมบัติแบบอ่านอย่างเดียว ส่งคืนประเภทขององค์ประกอบฟอร์มที่ช่องข้อความเป็น |
| value | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ value ของช่องข้อความ |
| list | ส่งคืนการอ้างอิงไปยัง datalist ที่มีช่องข้อความ |
ไวยากรณ์
ไวยากรณ์สำหรับการสร้างออบเจ็กต์ input text:
var P = document.createElement("INPUT"); P.setAttribute("type", "text");
ตัวอย่าง
มาดูตัวอย่างสำหรับออบเจ็กต์ input text:
<!DOCTYPE html> <html> <head> <script> function createText() { var P = document.createElement("INPUT"); P.setAttribute("type", "text"); document.body.appendChild(P); } </script> </head> <body> <h1>Text object example</h1> <p>สร้างช่อง input ที่มี type text โดยคลิกปุ่มด้านล่าง</p> <button onclick="createText()">CREATE</button> <br><br> USERNAME: </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
เมื่อคลิกปุ่ม CREATE:
