ออบเจ็กต์ช่วงอินพุต HTML DOM เชื่อมโยงกับองค์ประกอบ ที่มีประเภท "ช่วง" เราสามารถสร้างและเข้าถึงองค์ประกอบอินพุตที่มีช่วงประเภทโดยใช้เมธอด createElement() และ getElementById() ตามลำดับ
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุช่วงอินพุต -
| Sr.No | คุณสมบัติ &คำอธิบาย |
|---|---|
| 1 | เติมข้อความอัตโนมัติ การตั้งค่าหรือคืนค่าแอตทริบิวต์เติมข้อความอัตโนมัติของตัวควบคุมช่วง |
| 2 | ออโต้โฟกัส ในการตั้งค่าหรือย้อนกลับว่าตัวควบคุมแถบเลื่อนช่วงควรได้รับการโฟกัสโดยอัตโนมัติเมื่อโหลดหน้าหรือไม่ |
| 3 | ค่าเริ่มต้น ในการตั้งค่าหรือส่งคืนค่าเริ่มต้นของตัวควบคุมตัวเลื่อนช่วง |
| 4 | ปิดการใช้งาน เพื่อตั้งค่าหรือย้อนกลับหากการควบคุมตัวเลื่อนถูกปิดใช้งานหรือไม่ |
| 5 | แบบฟอร์ม เมื่อต้องการส่งคืนการอ้างอิงของแบบฟอร์มที่มีตัวควบคุมตัวเลื่อน |
| 6 | รายการ หากต้องการส่งคืนการอ้างอิงไปยังรายการข้อมูลที่มีตัวควบคุมตัวเลื่อน |
| 7 | แม็กซ์ การตั้งค่าหรือคืนค่าแอตทริบิวต์สูงสุดของตัวควบคุมตัวเลื่อน |
| 8 | ขั้นต่ำ การตั้งค่าหรือส่งกลับค่าแอตทริบิวต์ขั้นต่ำของตัวควบคุมตัวเลื่อน |
| 9 | ชื่อ การตั้งค่าหรือส่งกลับค่าแอตทริบิวต์ชื่อของตัวควบคุมตัวเลื่อน |
| 10 | ขั้นตอน เพื่อตั้งค่าหรือคืนค่าของแอตทริบิวต์ step ของตัวควบคุมตัวเลื่อน |
| 11 | พิมพ์ เมื่อต้องการส่งคืนชนิดองค์ประกอบของฟอร์มสำหรับตัวควบคุมตัวเลื่อน |
| 12 | ค่า การตั้งค่าหรือส่งกลับค่าแอตทริบิวต์ค่าของตัวควบคุมตัวเลื่อน |
วิธีการ
ต่อไปนี้เป็นวิธีการสำหรับวัตถุรหัสผ่าน -
| Sr.No | วิธีการ &คำอธิบาย |
|---|---|
| 1 | stepDown() วิธีลดค่าควบคุมตัวเลื่อนด้วยตัวเลขที่กำหนด |
| 2 | stepUp() เพื่อเพิ่มค่าควบคุมตัวเลื่อนด้วยตัวเลขที่กำหนด |
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับวัตถุ Input Range -
<!DOCTYPE html>
<html>
<head>
<script>
function rangeCreate() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}
</script>
</head>
<body>
<h1>Input range object</h1>
<p>Create an input field with type range by clicking the below button</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้าง -
ในตัวอย่างข้างต้น −
เราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด rangeCreate() เมื่อผู้ใช้คลิก -
<button onclick="rangeCreate()">CREATE</button>
เมธอด rangeCreate() ใช้เมธอด createElement() ของอ็อบเจ็กต์เอกสารเพื่อสร้างองค์ประกอบ โดยส่ง "INPUT" เป็นพารามิเตอร์ องค์ประกอบอินพุตที่สร้างขึ้นใหม่ถูกกำหนดให้กับตัวแปร R และโดยใช้เมธอด setAttribute() เราสร้างแอตทริบิวต์ประเภทที่มีช่วงค่า
อย่าลืมว่า setAttribute() สร้างแอตทริบิวต์แล้วกำหนดค่าหากไม่มีแอตทริบิวต์ก่อนหน้านี้ สุดท้ายโดยใช้เมธอด appendChild() บนเนื้อหาของเอกสาร เราผนวกองค์ประกอบอินพุตที่มีช่วงประเภทเป็นลูกของร่างกาย -
function createPASS() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
} 