X
Нажмите здесь, чтобы перейти на мобильную версию сайта.

Форум поддержки

HTML5 Step Not Working As Expected

Размещено

Using step on a number input is not working as expected when the value isn't pre-populated. See this jsfiddle for testing: https://jsfiddle.net/4Lx9ksfz/

Using step on a number input is not working as expected when the value isn't pre-populated. See this jsfiddle for testing: https://jsfiddle.net/4Lx9ksfz/
Цитата

Дополнительные сведения о системе

Установленные плагины

none

Приложение

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

Дополнительная информация

jscher2000
  • Top 10 Contributor
8638 решений 70669 ответов
Размещено

Which one is particular isn't working the way you expect, or works differently in different browsers?

The MDN page describing what Firefox and other browsers should do is here: https://developer.mozilla.org/docs/Web/HTML/Element/input/number#step

Which one is particular isn't working the way you expect, or works differently in different browsers? The MDN page describing what Firefox and other browsers ''should'' do is here: https://developer.mozilla.org/docs/Web/HTML/Element/input/number#step
Помогла ли вам это?
Цитата
Размещено

Задавший вопрос

So, the ones that have a pre-populated value (the bottom ones) will perform step exactly as expected.

For step="any" when in the field and pressing the up or down arrows on the keyboard, the whole number changes and retains the decimal places. So, 12.34 with up arrow becomes 13.34 and down arrow becomes 11.34. This is the correct and expected behavior.

However, the ones that do not have pre-populated values (the top ones), once you enter a value into the step="any" field, example 12.34 and try to do an up or down arrow on it, then it changes the entire number to become a whole number of up to 13 or down to 12) It loses the decimals entirely, and this is not the correct or expected behavior.

This works as expected in browsers outside of Firefox: Chrome, Safari, Edge.

So, the ones that have a pre-populated value (the bottom ones) will perform step exactly as expected. For step="any" when in the field and pressing the up or down arrows on the keyboard, the whole number changes and retains the decimal places. So, 12.34 with up arrow becomes 13.34 and down arrow becomes 11.34. This is the correct and expected behavior. However, the ones that do '''not''' have pre-populated values (the top ones), once you enter a value into the step="any" field, example 12.34 and try to do an up or down arrow on it, then it changes the entire number to become a whole number of up to 13 or down to 12) It loses the decimals entirely, and this is not the correct or expected behavior. This works as expected in browsers outside of Firefox: Chrome, Safari, Edge.
Помогла ли вам это?
Цитата
jscher2000
  • Top 10 Contributor
8638 решений 70669 ответов
Размещено

Hi NocFenix, the way I understand the article I referenced, when you use the up/down buttons on <input type="number">, only allows whole numbers are allowed unless the min or value attribute is set to a decimal number. I don't know why other browsers work differently.

Hi NocFenix, the way I understand the article I referenced, when you use the up/down buttons on &lt;input type="number">, only allows whole numbers are allowed unless the min or value attribute is set to a decimal number. I don't know why other browsers work differently.
Помогла ли вам это?
Цитата
Задать вопрос

Для ответа на сообщения вы должны войти в свою учётную запись. Пожалуйста, задайте новый вопрос, если у вас ещё нет учётной записи.