คุณสมบัติ type ของ HTML DOM Input Color ใช้คืนค่า/ตั้งค่าประเภทของ Input Color
รูปแบบไวยากรณ์ (Syntax)
- การคืนค่าสตริง
inputColorObject.type
- การตั้งค่า type เป็นค่าสตริง
inputColorObject.type = stringValue
ค่าสตริงที่เป็นไปได้
ในที่นี้ “stringValue” สามารถเป็นค่าต่อไปนี้ได้:
| stringValue | รายละเอียด |
|---|---|
| Color | กำหนดว่าประเภท input เป็น color |
| Radio | กำหนดว่าประเภท input เป็น radio |
| Text | กำหนดว่าประเภท input เป็น text |
ตัวอย่าง
ตัวอย่างการใช้งานคุณสมบัติ Input Color type:
<!DOCTYPE html> <html> <head> <title>Input Color Type</title> </head> <body> <form id="formForColorsInput"> Color Picker: <input type="color" id="Color" name="primaryColor" value="#0000ff"> </form> <button onclick="changeNameValue()">ดึง type และเปลี่ยนเป็น text</button> <div id="divDisplay"></div> <script> var inputColor = document.getElementById("Color"); var divDisplay = document.getElementById("divDisplay"); divDisplay.textContent = 'ประเภทของ Input: '+inputColor.type; function changeNameValue() { if(inputColor.type == 'color'){ var defaultColor = inputColor.defaultValue; inputColor.type = 'text'; inputColor.value = defaultColor; divDisplay.textContent = 'ชื่อของ color input: '+inputColor.type; } } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้:
ก่อนคลิกปุ่ม 「ดึง type และเปลี่ยนเป็น text」 :
หลังคลิกปุ่ม 「ดึง type และเปลี่ยนเป็น text」 :
