Số đầu vào HTML DOM Đối tượng đại diện cho
Hãy xem cách tạo đối tượng số đầu vào
Cú pháp
Sau đây là cú pháp -
var numberInput = document.createElement(“INPUT”); numberInput.setAttribute(“type”,”number”);
Thuộc tính
Sau đây là các thuộc tính của đối tượng số đầu vào -
Thuộc tính| | Giải thích |
|---|---|
| tự động hoàn thành | Nó trả về và thay đổi giá trị của thuộc tính tự động hoàn thành của trường nhập số. |
| tự động lấy nét | Nó trả về và sửa đổi xem trường số đầu vào có được lấy tiêu điểm hay không khi tải trang. |
| bị vô hiệu hóa | Nó trả về và sửa đổi xem trường số đầu vào có bị vô hiệu hóa hay không. |
| defaultValue | Nó trả về và thay đổi giá trị mặc định của trường số đầu vào. |
| biểu mẫu | Nó trả về tham chiếu của biểu mẫu có chứa trường số đầu vào trong tài liệu HTML. |
| | Nó trả về tham chiếu của datalist có chứa trường số đầu vào. |
| tối đa | Nó trả về và sửa đổi giá trị của thuộc tính max của trường số đầu vào. |
| phút | Nó trả về và sửa đổi giá trị của thuộc tính min của trường số đầu vào. |
| tên | Nó trả về và thay đổi giá trị của thuộc tính tên của trường số đầu vào. |
| readOnly | Nó trả về và sửa đổi trường số đầu vào có phải là trường chỉ đọc hay không. |
| bắt buộc | Nó trả về và sửa đổi xem trường số có phải được điền trước khi gửi biểu mẫu hay không. |
| | Nó trả về và thay đổi giá trị của thuộc tính tập hợp của trường số đầu vào. |
| | Nó trả về giá trị của thuộc tính kiểu của trường nhập số. |
| | Nó trả về và sửa đổi nội dung của thuộc tính giá trị của trường nhập số. |
| | Nó trả về và sửa đổi giá trị của thuộc tính giữ chỗ của trường nhập số. |
Phương pháp
Sau đây là các phương thức nhập số đối tượng
Phương thức| | Giải thích |
|---|---|
| stepUp () | Nó tăng giá trị của trường số đầu vào bằng giá trị được chỉ định trong tham số của nó. |
| stepDown () | Nó làm giảm giá trị của trường số đầu vào bằng giá trị được chỉ định trong tham số của nó. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về đối tượng số đầu vào -
<!DOCTYPE html>
<html>
<style>
body{
text-align:center;
background-color:#363946;
color:#fff;
}
form{
margin:2.5rem auto;
}
button{
background-color:#db133a;
border:none;
cursor:pointer;
padding:8px 16px;
color:#fff;
border-radius:5px;
font-size:1.05rem;
outline:none;
}
.show{
font-weight:bold;
font-size:1.4rem;
}
</style>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="month" class="monthInput">
</fieldset>
</form>
<button onclick="identify()">Identify Month Input Field</button>
<p class="show"></p>
<script>
function identify() {
var formId = document.querySelector(".monthInput").form.id;
document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Tạo trường số đầu vào ”Để tạo trường nhập số.
