HTMLInputElement: phương thức stepUp()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Phương thức HTMLInputElement.stepUp() tăng giá trị của loại đầu vào <input> số theo giá trị của thuộc tính step, hoặc giá trị step mặc định nếu thuộc tính step không được đặt rõ ràng. Phương thức, khi được gọi, tăng value lên (step * n), trong đó n mặc định là 1 nếu không được chỉ định, và step mặc định là giá trị mặc định cho step nếu không được chỉ định.
| Loại đầu vào | Giá trị step mặc định | Ví dụ khai báo step |
|---|---|---|
| date | 1 (ngày) |
Tăng 7 ngày (một tuần):<input type="date" min="2019-12-25" step="7">
|
| month | 1 (tháng) |
Tăng 12 tháng (một năm):<input type="month" min="2019-12" step="12">
|
| week | 1 (tuần) |
Tăng hai tuần:<input type="week" min="2019-W23" step="2">
|
| time | 60 (giây) |
Tăng 900 giây (15 phút):<input type="time" min="09:00" step="900">
|
| datetime-local | 1 (ngày) |
Cùng ngày trong tuần:<input type="datetime-local" min="019-12-25T19:30"
step="7">
|
| number | 1 |
Tăng 0.1<input type="number" min="0" step="0.1" max="10">
|
| range | 1 |
Tăng theo 2:<input type="range" min="0" step="2" max="10">
|
Phương thức, khi được gọi, thay đổi giá trị của điều khiển biểu mẫu theo giá trị được cho trong thuộc tính step, nhân với tham số, trong các ràng buộc được đặt trên điều khiển biểu mẫu. Giá trị mặc định cho tham số, nếu không có giá trị nào được truyền, là 1. Phương thức sẽ không làm cho giá trị vượt quá giá trị max được đặt, hoặc vi phạm các ràng buộc do thuộc tính step đặt ra.
Nếu giá trị trước khi gọi phương thức stepUp() không hợp lệ—ví dụ: nếu nó không phù hợp với các ràng buộc do thuộc tính step đặt ra—việc gọi phương thức stepUp() sẽ trả về giá trị phù hợp với các ràng buộc của điều khiển biểu mẫu.
Nếu điều khiển biểu mẫu không phải là thời gian, ngày hoặc số, và do đó không hỗ trợ thuộc tính step (xem danh sách các loại đầu vào được hỗ trợ trong bảng trên), hoặc nếu giá trị step được đặt thành any, ngoại lệ InvalidStateError sẽ được ném ra.
Cú pháp
stepUp()
stepUp(stepIncrement)
Tham số
stepIncrementOptional-
Một giá trị số. Nếu không có tham số được truyền,
stepIncrementmặc định là1.
Giá trị trả về
Không có (undefined).
Ví dụ
Nhấp vào nút trong ví dụ này để tăng loại đầu vào number:
HTML
<p>
<label for="theNumber">
Nhập một số từ 0 đến 400 chia hết cho 5:
</label>
<input type="number" step="5" id="theNumber" min="0" max="400" />
</p>
<p>
<label>
Nhập số bước bạn muốn tăng hoặc để trống:
</label>
<input type="number" step="1" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Tăng" id="theButton" />
JavaScript
/* khiến nút gọi hàm */
const button = document.getElementById("theButton");
button.addEventListener("click", () => {
stepOnUp();
});
function stepOnUp() {
let input = document.getElementById("theNumber");
let val = document.getElementById("incrementInput").value;
if (val) {
/* tăng với tham số */
input.stepUp(val);
} else {
/* hoặc không có tham số. Thử với 0 */
input.stepUp();
}
}
CSS
input:invalid {
border: red solid 3px;
}
Kết quả
Lưu ý nếu bạn không truyền tham số cho phương thức stepUp, nó mặc định là 1. Bất kỳ giá trị nào khác là bội số của giá trị thuộc tính step, trong trường hợp này là 5. Nếu bạn truyền 4 làm stepIncrement, đầu vào sẽ stepUp lên 4 * 5, hay 20. Nếu tham số là 0, số sẽ không tăng. stepUp sẽ không cho phép đầu vào ra ngoài phạm vi, trong trường hợp này dừng khi đạt 400, và làm tròn xuống các số thập phân được truyền làm tham số.
Thử đặt đầu vào step increment thành 1.2. Điều gì xảy ra khi gọi phương thức?
Thử đặt giá trị thành 4, không hợp lệ. Điều gì xảy ra khi gọi phương thức?
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-input-stepup-dev |
Tương thích trình duyệt
Xem thêm
<input>HTMLInputElementHTMLInputElement.stepDown- Các thuộc tính
step,minvàmax