Đối tượng Phạm vi đầu vào HTML DOM được liên kết với phần tử có loại “phạm vi”. Chúng ta có thể tạo và truy cập một phần tử đầu vào với phạm vi kiểu bằng cách sử dụng phương thức createElement () và getElementById () tương ứng.
Thuộc tính
Sau đây là các thuộc tính cho đối tượng Phạm vi đầu vào -
| Sr.No | Thuộc tính &Mô tả |
|---|---|
| 1 | tự động hoàn thành Để đặt hoặc trả về giá trị thuộc tính tự động hoàn thành của điều khiển phạm vi. |
| 2 | tự động lấy nét Để đặt hoặc trả về liệu điều khiển thanh trượt phạm vi có tự động lấy tiêu điểm khi trang tải hay không |
| 3 | defaultValue Để đặt hoặc trả về giá trị mặc định của điều khiển thanh trượt phạm vi. |
| 4 | bị vô hiệu hóa Để đặt hoặc quay lại nếu điều khiển thanh trượt đã bị vô hiệu hóa hay chưa. |
| 5 | biểu mẫu Để trả về tham chiếu của biểu mẫu có chứa điều khiển thanh trượt |
| 6 | Danh sách Để trả về tham chiếu đến danh sách dữ liệu có chứa điều khiển thanh trượt |
| 7 | Tối đa Để đặt hoặc trả về giá trị thuộc tính tối đa của điều khiển thanh trượt. |
| 8 | Tối thiểu Để đặt hoặc trả về giá trị thuộc tính tối thiểu của điều khiển thanh trượt. |
| 9 | Tên Để đặt hoặc trả về giá trị thuộc tính tên của điều khiển thanh trượt. |
| 10 | Bước Để đặt hoặc trả về giá trị của thuộc tính bước của điều khiển thanh trượt. |
| 11 | Loại Để trả về loại phần tử biểu mẫu cho điều khiển thanh trượt. |
| 12 | giá trị Để đặt hoặc trả về giá trị thuộc tính value của điều khiển thanh trượt. |
Phương pháp
Sau đây là phương thức cho đối tượng mật khẩu -
| Sr.No | Phương pháp &Mô tả |
|---|---|
| 1 | stepDown () Để giảm giá trị điều khiển thanh trượt theo một số nhất định |
| 2 | stepUp () Để tăng giá trị điều khiển thanh trượt lên một số nhất định. |
Ví dụ
Chúng ta hãy xem một ví dụ cho đối tượng Phạm vi đầu vào -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẠO -
Trong ví dụ trên -
Chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức rangeCreate () khi người dùng nhấp vào -
<button onclick="rangeCreate()">CREATE</button>
Phương thức rangeCreate () sử dụng phương thức createElement () của đối tượng tài liệu để tạo phần tử bằng cách chuyển “INPUT” làm tham số. Phần tử đầu vào mới tạo được gán cho biến R và sử dụng phương thức setAttribute (), chúng tôi tạo một thuộc tính kiểu với phạm vi giá trị.
Hãy nhớ rằng setAttribute () tạo thuộc tính và sau đó chỉ định giá trị nếu thuộc tính đó không tồn tại trước đó. Cuối cùng bằng cách sử dụng phương thức appendChild () trên phần thân tài liệu, chúng tôi nối phần tử đầu vào với phạm vi kiểu làm con của phần nội dung -
function createPASS() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}