HTMLInputElement: stepUp() ใกใฝใใ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
HTMLInputElement.stepUp() ใกใฝใใใฏใๆฐๅคๅใฎ <input> ่ฆ็ด ใฎๅคใ
step ๅฑๆงใฎๅคใใพใใฏ step ๅฑๆงใๆ็คบ็ใซ่จญๅฎใใใฆใใชใๅ ดๅใฏๆขๅฎใฎ step ใฎๅคใ ใๅขๅ ใใใใใฎใงใใใใฎใกใฝใใใๅผใณๅบใใจใ value ใฏ (step * n) ใ ใๆธๅฐใใพใใใใใงใn ใฏๆๅฎใใใชใใฃใๅ ดๅใๆขๅฎใง 1 ใจใชใใstep ใๆๅฎใใใชใใฃใๅ ดๅใ step ใฎๆขๅฎๅคใจใชใใพใใ
| ๅ ฅๅๅ | ๆขๅฎใฎ step ใฎๅค | step ใฎๅฎฃ่จใฎไพ |
|---|---|---|
| date | 1 ๏ผๆฅ๏ผ |
7 ๆฅ๏ผ1 ้ฑ้๏ผๅไฝใฎๅขๅ :<input type="date" min="2019-12-25" step="7">
|
| month | 1 ๏ผใถๆ๏ผ |
12 ใถๆ๏ผ1 ๅนด๏ผๅไฝใฎๅขๅ :<input type="month" min="2019-12" step="12">
|
| week | 1 ๏ผ้ฑ้๏ผ |
2 ้ฑ้ๅไฝใฎๅขๅ :<input type="week" min="2019-W23" step="2">
|
| time | 60 ๏ผ็ง๏ผ |
900 ็ง๏ผ15 ๅ๏ผๅไฝใฎๅขๅ :<input type="time" min="09:00" step="900">
|
| datetime-local | 1 ๏ผๆฅ๏ผ |
ๅใๆๆฅ:<input type="datetime-local" min="019-12-25T19:30"
step="7">
|
| number | 1 |
0.1 ๅปใฟ<input type="number" min="0" step="0.1" max="10">
|
| range | 1 |
2 ใใคๅขๅ :<input type="range" min="0" step="2" max="10">
|
ใใฎใกใฝใใใๅผใณๅบใใจใใใฉใผใ ใณใณใใญใผใซๅ
ใง่จญๅฎใใใๅถ็ดใฎ็ฏๅฒๅ
ใงใ step ๅฑๆงใงๆๅฎใใใๅคใซๅผๆฐใๆใใๅคใ ใใใใฉใผใ ใณใณใใญใผใซใฎๅคใๅคๆดใใพใใๅผๆฐใๆธกใใใชใใฃใๅ ดๅใฎๆขๅฎๅคใฏ 1 ใงใใใใฎใกใฝใใใฏใๅคใ max ใไธๅใฃใใใ step ๅฑๆงใ่จญๅฎใใๅถ็ดใซ้ๅใใใใใใชใใจใฏใใพใใใ
stepUp() ใกใฝใใใๅผใณๅบใๅใฎๅคใ็กๅนใงใใฃใๅ ดๅใไพใใฐ step ๅฑๆงใง่จญๅฎใใๅถ็ดใซ้ฉๅใใชใๅ ดๅใ stepUp() ใกใฝใใใๅผใณๅบใใจใใใฉใผใ ใณใณใใญใผใซใฎๅถ็ดใซ้ฉๅใใๅคใ่ฟใใใพใใ
ใใฉใผใ ใณใณใใญใผใซใๆๅปใๆฅไปใๆฐๅคไปฅๅคใฎใใฎใงใ step ๅฑๆงใซๅฏพๅฟใใฆใใชใๅ ดๅ๏ผๅ่ฟฐใฎ่กจใซๅฏพๅฟใใๅ
ฅๅๅใฎใชในใใๅ็
ง๏ผใใพใใฏ step ๅคใ any ใซ่จญๅฎใใใฆใใๅ ดๅใ InvalidStateError ไพๅคใ็บ็ใใพใใ
ๆงๆ
stepUp()
stepUp(stepIncrement)
ๅผๆฐ
stepIncrement็็ฅๅฏ-
ๆฐๅคใงใใๅผๆฐใๆธกใใใชใใฃใๅ ดๅใ
stepIncrementใฏๆขๅฎใง1ใซใชใใพใใ
่ฟๅค
ใชใ (undefined)ใ
ไพ
ใใฎไพใฎใใฟใณใใฏใชใใฏใใใจใ number ๅ ฅๅๅใฎๅคใๅขๅ ใใพใใ
HTML
<p>
<label for="theNumber">
0 ใใ 400 ใพใงใฎ 5 ใงๅฒใๅใใๆฐใๅ
ฅๅใใฆใใ ใใใ
</label>
<input type="number" step="5" id="theNumber" min="0" max="400" />
</p>
<p>
<label>ๅขๅ ใใใใๆฎต้ใฎๆฐใๅ
ฅๅใใใใ็ฉบๆฌใฎใพใพใซใใฆใใ ใใใ</label>
<input type="number" step="1" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Increment" id="theButton" />
Java10Script
/* ้ขๆฐใๅผใณๅบใใใฟใณใ็ๆ */
const button = document.getElementById("theButton");
button.addEventListener("click", () => {
stepOnUp();
});
function stepOnUp() {
let input = document.getElementById("theNumber");
let val = document.getElementById("incrementInput").value;
if (val) {
/* ๅผๆฐไปใใงๅ ็ฎ */
input.stepUp(val);
} else {
/* ๅผๆฐใชใใงๅ ็ฎใ 0 ใ่ฉฆใใฆใใ ใใใ */
input.stepUp();
}
}
CSS
input:invalid {
border: red solid 3px;
}
็ตๆ
stepUp ใกใฝใใใซๅผๆฐใๆธกใใชใใฃใๅ ดๅใๆขๅฎๅคใฏ 1 ใซใชใใพใใไปใฎๅคใฏ step ๅฑๆงใฎๅคใซไน็ฎใใใใฎใงใใใฎๅ ดๅใฏ 5 ใจใชใใพใใ stepIncrement ใซ 4 ใๆธกใใๅ ดๅใ stepUp ใฏ 4 * 5 ใใชใใก 20 ใ ใ่กใใใพใใใใฎๅผๆฐใ 0 ใงใใฃใๅ ดๅใๆฐๅคใฏๅ ็ฎใใใพใใใ stepUp ใกใฝใใใฏๅ
ฅๅใ็ฏๅฒๅคใซใชใใชใใใใซใใใฎๅ ดๅใฏ 400 ใซใชใฃใๆ็นใงๅๆญขใใๅผๆฐใจใใฆๆธกใใใๅคใฎๅฐๆฐ็นไปฅไธใๅใๆจใฆใพใใ
ๆฎต้ใฎๅ ็ฎไฟๆฐใ 1.2 ใซ่จญๅฎใใฆใฟใฆใใ ใใใใกใฝใใใๅผใณๅบใใจใฉใใชใใงใใใใ๏ผ
ๅคใไธๆญฃใชๆฐๅคใงใใ 4 ใซ่จญๅฎใใฆใฟใฆใใ ใใใใกใฝใใใๅผใณๅบใใจใฉใใชใใงใใใใ๏ผ
ไปๆงๆธ
| Specification |
|---|
| HTML # dom-input-stepup-dev |
ใใฉใฆใถใผใฎไบๆๆง
Loadingโฆ