javascript - 为什么 Firefox 输入时间时显示秒，最小单位为分钟？

Question

问题

当涉及 time 类型的输入时，Firefox(OS X 上的 v65.0.1)对我来说表现得很奇怪。即使这样的输入配置为使用 step一分钟的值(这是默认值)，因此不处理秒，它显示了用于输入秒的部分(尽管它对于用户输入被禁用)。甚至是MDN documentation time类型输入表示如果step属性小于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>