Почему Firefox показывает секунды для ввода времени с минутой как наименьшей единицей?

Question

Проблема

Firefox (v65.0.1 на OS X) ведет себя странно для меня, когда дело доходит до входов типа time .Даже если такой вход настроен на использование значения step минуты (которое является значением по умолчанию), и как таковой не имеет дело с секундами, он показывает раздел для ввода секунд (хотя он отключен дляпользовательский ввод).Даже в документации MDN о типах ввода времени указано, что область ввода будет отображать только область ввода в секундах, если свойство шага меньше 60 секунд.

Это ошибка в Firefox, так какпоказалось бы мне?Есть ли способ обойти это?

На приведенном ниже снимке экрана показано, как для меня отображается вход в Firefox, даже если шаг равен 60 и секунды как таковые не должны быть доступны.

Демонстрация

Ниже приводится ввод времени и фрагмент текста, который будет отображать ввод времени в поле.Это работает на f.ex.Chrome, но в Firefox это не происходит, потому что событие input никогда не срабатывает (из-за секундной области ввода, которую вы даже не можете заполнить).

const elem = document.getElementById('time-input')
const displayElem = document.getElementById('time-display')
elem.addEventListener('input', (e) => {
  const {value} = e.target
  displayElem.textContent = value
})

<input id="time-input" type="time">
<p>Current time is: <span id="time-display">n/a</a></p>

Answer 1

РЕДАКТИРОВАТЬ: Не путайте черточки-заполнители AM / PM для секунд ввода заполнителей!

Меня осенило, что вы видите на изображении, которое вы разместили в своем вопросе. Эти тире являются AM/PM заполнителями.

Чтобы удалить эти заполнители (в FF), локаль браузера используется для определения, используется ли am/pm. Если языковой стандарт установлен на 24-часовой формат, то время будет в 24-часовом формате, и вы потеряете селектор am/pm.

const elem = document.getElementById('time-input')
const displayElem = document.getElementById('time-display')
elem.addEventListener('input', (e) => {
  const {value} = e.target
  displayElem.textContent = value
})

const elem2 = document.getElementById('time-input2')
const displayElem2 = document.getElementById('time-display2')
elem2.addEventListener('input', (e) => {
  const {value} = e.target
  displayElem2.textContent = value
})

<input id="time-input" type="time" step="59">
<p>Current time is: <span id="time-display">n/a</span></p>
<br>
<input id="time-input2" type="time">
<p>Current time is: <span id="time-display2">n/a</span></p>