1

У меня есть поле:

<input type="number" id="for-second" placeholder="00" min="0" max="59" />

В которое вводяться секунды в диапазоне от 0 до 59.

Мне нужно, чтобы при условии (n < 10) секунды записывались в формате 00.

Пример: 07, 02, 00.

Сама функция добавления 0 к числу есть, конечно же. Она работает только когда таймер запускаеться (при клике на кнопку «play») - что уже хорошо. Но для полной картины нужно, чтобы 0 добавлялся к числу, когда я ввожу значение или кликаю по стрелочкам вверх/вниз.

Чего без функции поля - получить не удается!

Реализация:

// JAVASCRIPT
//--- Переменные ---
var hour = document.getElementById('for-hour').value;
var minute = document.getElementById('for-minute').value;
var second = document.getElementById('for-second').value;

//--- Функция таймера ---
function Launch() {
  //--- проверки на времья ---
  if (second > 0) {
    if (second > 60) {
      minute = Math.floor(second / 60);
      second = second - (minute * 60) + 1;
    }
    second--;
    if ((second < 10) || (second == 0)) {
      second = ZeroBeforeValue(second);
    }
  }
  else if ((minute > 0) && (second == 0)) {
    minute--;
    second = 59;
    if ((minute < 10) || (minute == 0)) {
      minute = ZeroBeforeValue(minute);
    }
  }
  else if ((hour > 0) && (minute == 0) && (second == 0)) {
    hour--;
    minute = 59;
    second = 59;
    if ((hour < 10) || (hour == 0)) {
      hour = ZeroBeforeValue(hour);
    }
  }
  //--- если конец, то ---
  else {
    clearInterval(intervalID);
    document.getElementById('for-hour').value = '';
    document.getElementById('for-minute').value = '';
    document.getElementById('for-second').value = '';

    alert("Time is running out!!!");
    return false;
  }
  //--- записуем данные
  document.getElementById('for-hour').value = hour;
  document.getElementById('for-minute').value = minute;
  document.getElementById('for-second').value = second;
} //--- Обновление функции таймера каждой секунды ---
window.intervalID = setInterval(Launch, 1000);

//--- Функция добавления 0 к n, если (n < 10) ---
//--- Якщо (n < 10), то перед 'n' додаємо '0'
function ZeroBeforeValue(value) {
  var text = value + '';
  value = '0' + text;
  
  return value;
}
<!-- HTML -->
<input type="number" id="for-hour" placeholder="00" min="0" max="23" />:
<input type="number" id="for-minute" placeholder="00" min="0" max="59" />:
<input type="number" id="for-second" placeholder="00" min="0" max="59" />

7
  • Какое поведение вы ожидаете, когда в поле вводят просто "4"? Сразу добавление в начале 0? Или все же дождаться пока фокус с поля спадет и будет ясно, что это не скажем "40"? 16 окт 2017 в 17:35
  • Сначала оформлено так - 00:00:00. Если вводите 4, то - 00:00:04. Если добавляете 0, то 00:00:40. И все это без Enter/Submit. 16 окт 2017 в 17:37
  • И да, хотелось бы наверное увидеть вашу текущую реализацию, что бы понять можно ли это как-то использовать .... 16 окт 2017 в 17:39
  • реализация добавлена, поправил 16 окт 2017 в 17:50
  • 1
    а input type="time" не подходит?
    – n3r0bi0m4n
    16 окт 2017 в 18:03

3 ответа 3

5

var input = document.querySelector('input');
var st
input.addEventListener('input', function() {

  st = input.value + "";

  if (st.length == 1) {
    input.value = '0' + input.value;
  } else {
    input.value = '' + input.value;
  }
});
<input type="number" />

2

Если нужны секунды, воспользуйтесь свойством step:

<input type="time" step="1"/>

К сожалению, пока что поддерживается не всеми браузерами. Как альтернативу можно использовать DateTimePicker плагин для jQuery.

1

/*let input = document.querySelector( '#someField' );

input.addEventListener( 'change', ( e ) => {
  input.value = '0' + e.target.value;
});
*/
#someField {
  width: 200px;
}
<input id="someField" type="time" step="1" />

1
  • попробуйте добавлять по одной цифре убирая фокус с поля ввода
    – n3r0bi0m4n
    16 окт 2017 в 18:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.