Принудительный начальный нуль при вводе числа

Я пишу веб-приложение для будильника. У меня есть два числовых ввода, один для часов, один для минут. Таким образом, когда я использую стрелки на клавиатуре, они идут от 0 до 23/59. Есть ли встроенный в HTML способ заставить их перейти с 00 (01,02 и т. д.) на 23/59 вместо этого?

Меня беспокоят только аспекты пользовательского интерфейса, поскольку мой JS все равно управляет недостающим 0.

РЕДАКТИРОВАТЬ - В соответствии с запросом:

Что я имею :

Текущий

Что я хочу :

Цель

Вместо того, чтобы переходить от 0,1,2 до 59, я хотел бы автоматически иметь начальный 0, когда число меньше 10 (от 00,01,02 до 59).


html number-formatting
person Simon    schedule 19.12.2013    source источник
comment
Из вашего вопроса непонятно, что вы спрашиваете. Возможно, вы могли бы собрать JSFiddle или поделиться ссылкой, чтобы мы могли видеть, с чем вы работаете?   -  person johnkavanagh    schedule 19.12.2013
comment
Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительные сведения, чтобы выделить именно то, что вам нужно. В том виде, в котором он сейчас написан, трудно точно сказать, о чем вы спрашиваете.   -  person Mohammad Areeb Siddiqui    schedule 19.12.2013
comment
Вы не хотите манипулировать вводом с помощью JavaScript, только с помощью собственного HTML?   -  person KungWaz    schedule 19.12.2013
comment
Нет собственного способа сделать это, вам нужно проверить, меньше ли число 10, и добавить строку «0» перед цифрой, если это правда.   -  person L105    schedule 19.12.2013

Ответы (2)


arrow_upward
7
arrow_downward

Я боюсь, что нет собственного HTML-способа сделать это, если только не использовать тег Select. Если вы используете текстовый ввод, вы должны добавить начальный 0 к 10 первым значениям с помощью javascript.

person Guillaume Raymond    schedule 19.12.2013

arrow_upward
14
arrow_downward

Я использую это, чтобы просто добавлять нули по мере необходимости:

<script>
  function leadingZeros(input) {
    if(!isNaN(input.value) && input.value.length === 1) {
      input.value = '0' + input.value;
    }
  }
</script>

И я просто вызываю это для различных событий ввода, как это лучше всего работает для меня, например:

<input type="number"
       value="00"
       onchange="leadingZeros(this)"
       onkeyup="leadingZeros(this)"
       onclick="leadingZeros(this)" />

Это не идеальное решение, в основном потому, что есть небольшое визуальное изменение, когда пользователь меняет число и добавляет ноль, но это работает для меня :)

Редактировать: забыл упомянуть, я ценю ответ, запрошенный для нативного решения без javascript, но я хотел предоставить что-то для людей, попадающих сюда через поиск Google.

person apbarratt    schedule 06.10.2017
comment
Ваш ответ ценится! Спасибо за публикацию! - person ReinstateMonica3167040; 01.01.2019