HTMLInputElement: метод stepDown()

Метод HTMLInputElement.stepDown() уменьшает значение числового типа элемента <input> на значение атрибута step или до n кратных значений атрибута step, если в качестве параметра передано число.

При вызове метод уменьшает значение value на (step * n), где n по умолчанию равно 1, если не указано иное, а step по умолчанию имеет значение по умолчанию для step если не указано иное.

Действительно для всех числовых, даты и времени типов ввода, которые поддерживают атрибут step, включая дату, месяц, неделю, время, datetime-local, число и диапазон.

Учитывая <input id="myTime" type="time" max="17:00" step="900" value="17:00">, вызов myTime.stepDown(3) изменит значение на 16:15, уменьшив время на 3 * 900, или на 45 минут. myTime.stepDown(), без параметра, привело бы к 16:45, так как n по умолчанию равно 1.

<!-- decrements by intervals of 900 seconds (15 minute) -->
<input type="time" max="17:00" step="900" />

<!-- decrements by intervals of 7 days (one week) -->
<input type="date" max="2019-12-25" step="7" />

<!-- decrements by intervals of 12 months (one year) -->
<input type="month" max="2019-12" step="12" />

Однако, вызов stepDown для <input type="time" max="17:00" step="900"> не установит значение 17:00, как можно ожидать — и так же как это делает stepUp когда вход <input type="time" min="17:00" step="900">. Вместо этого первый вызов stepDown установит начальное значение в 23:45, хотя атрибут max задан. Второй вызов установит значение в 17:00. А третий вызов установит значение в 16:45.

let input1 = document.createElement("input");
input1.setAttribute("type", "time");
input1.setAttribute("min", "17:00");
input1.setAttribute("step", 900);
console.log(input1.value); // ""
input1.stepUp();
console.log(input1.value); // "17:00"
// However
let input2 = document.createElement("input");
input2.setAttribute("type", "time");
input2.setAttribute("max", "17:00");
input2.setAttribute("step", 900);
console.log(input2.value); // ""
input2.stepDown();
console.log(input2.value); // "23:45"
input2.stepDown();
console.log(input2.value); // "17:00"
input2.stepDown();
console.log(input2.value); // "16:45"

Метод, при вызове, изменяет значение элемента управления формы на значение, указанное в атрибуте step , умноженное на параметр, в пределах ограничений, установленных в элементе управления формы. Значение параметра по умолчанию, если не указано, равно 1. Метод не приведет к значению ниже значения min или нарушению ограничений, установленных атрибутом step. Отрицательное значение для n увеличит значение, но не превысит значения max.

Если значение до вызова метода stepDown() некорректно, например, если оно не соответствует ограничениям, установленным атрибутом step , вызов метода stepDown() вернёт значение, соответствующее ограничениям элементов управления формы.

Если элемент управления формы не является временным, датой или числовым, и, следовательно, не поддерживает атрибут step (см. список поддерживаемых типов ввода выше), или если значение step установлено в any, выбрасывается исключение InvalidStateError.

Синтаксис

stepDown()
stepDown(stepDecrement)

Параметры

stepDecrement Необязательно

Числовое значение. Если параметр не передан, stepDecrement по умолчанию равен 1.

Если значение является числом с плавающей точкой, значение будет уменьшаться, как если бы был передан Math.floor(stepDecrement). Если значение отрицательное, значение будет увеличено вместо уменьшения.

Возвращаемое значение

Ничего (undefined).

Исключения

InvalidStateError DOMException

Выбрасывается в одном из следующих случаев:

если метод неприменим для текущего значения type,
если у элемента нет значения step,
если значение value нельзя преобразовать в число,
если результирующее значение превышает max или меньше min.

Примеры

Нажмите кнопку в этом примере, чтобы уменьшить тип ввода число:

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 for="decrementButton">
    Enter how many values of step you would like to decrement by or leave it
    blank:
  </label>
  <input type="number" step="1" id="decrementInput" min="-2" max="15" />
</p>
<input type="button" value="Decrement" id="theButton" />

JavaScript

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

function stepOnDown() {
  let input = document.getElementById("theNumber");
  let val = document.getElementById("decrementInput").value;

  if (val) {
    // decrement with a parameter
    input.stepDown(val);
  } else {
    // or without a parameter. Try it with 0, 5, -2, etc.
    input.stepDown();
  }
}

CSS

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

Результат

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

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

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

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`stepDown`	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/stepDown