HTMLInputElement: метод stepUp()

Метод HTMLInputElement.stepUp() увеличивает значение числового типа элемента <input> на значение атрибута step, или значение по умолчанию step , если атрибут step не задан явно. При вызове метода увеличивается значение value на (step * n), где n по умолчанию равно n , если не указано, а step по умолчанию имеет значение по умолчанию для step , если не указано.

Тип ввода	Значение шага по умолчанию	Пример объявления шага
date	`1` (день)	Приращения в 7 дней (одна неделя): `<input type="date" min="2019-12-25" step="7">`
month	`1` (месяц)	Приращения в 12 месяцев (один год): `<input type="month" min="2019-12" step="12">`
week	`1` (неделя)	Приращения в две недели: `<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">
    Enter a number between 0 and 400 that is divisible by 5:
  </label>
  <input type="number" step="5" id="theNumber" min="0" max="400" />
</p>
<p>
  <label>
    Enter how many values of step you would like to increment by or leave it
    blank:
  </label>
  <input type="number" step="1" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Increment" id="theButton" />

JavaScript

/* make the button call the function */
const button = document.getElementById("theButton");
button.addEventListener("click", () => {
  stepOnUp();
});

function stepOnUp() {
  let input = document.getElementById("theNumber");
  let val = document.getElementById("incrementInput").value;

  if (val) {
    /* increment with a parameter */
    input.stepUp(val);
  } else {
    /* or without a parameter. Try it with 0 */
    input.stepUp();
  }
}

CSS

input:invalid {
  border: red solid 3px;
}

Результат

Обратите внимание, что если вы не передаете параметр методу stepUp, он по умолчанию принимает значение 1. Любое другое значение является множителем значения атрибута step, которое в данном случае равно 5. Если вы передаете 4 в качестве stepIncrement, значение ввода увеличится на 4 * 5, или 20. Если параметр равен 0, число не будет увеличено. stepUp не позволит вводу выйти за пределы диапазона, в данном случае остановившись, когда оно достигнет 400, и округлив вниз любые числа с плавающей запятой, переданные в качестве параметра.

Попробуйте установить шаг инкремента ввода в значение 1.2. Что произойдет при вызове метода?

Попробуйте установить значение в 4, которое не является допустимым. Что произойдёт при вызове метода?

Спецификации

Спецификация
HTML # dom-input-stepup-dev

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`stepUp`	5	12	16 Не имеет конкретного пользовательского интерфейса. Существуют различия с последней спецификацией; см. ошибку 835773.	≤12.1	5	18	16 Не имеет конкретного пользовательского интерфейса. Существуют различия с последней спецификацией; см. ошибку 835773.	≤12.1	4	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp