如何在Firefox浏览器中禁用日期输入框的键盘输入功能？

以下是几种可行的解决方案，既能保留日历选择功能，又能阻止键盘输入：

方案1：阻止键盘输入与粘贴事件 #

通过监听键盘和粘贴事件，直接阻止所有手动输入操作：

<input
  className="date__input"
  type="date"
  key={t.id}
  value={t.factStart?.toLocaleDateString('en-CA')}
  onChange={(e) => handleChangeInput(e, index, 'factStart')}
  onKeyDown={(e) => e.preventDefault()}
  onPaste={(e) => e.preventDefault()}
/>

如果onKeyDown在Firefox中无效，可尝试替换为onKeyPress事件：

<input
  className="date__input"
  type="date"
  key={t.id}
  value={t.factStart?.toLocaleDateString('en-CA')}
  onChange={(e) => handleChangeInput(e, index, 'factStart')}
  onKeyPress={(e) => e.preventDefault()}
  onPaste={(e) => e.preventDefault()}
/>

方案2：输入时重置为原始值 #

监听输入事件，若检测到非日历选择的内容变更，立刻将输入框值重置为原始日期：

<input
  className="date__input"
  type="date"
  key={t.id}
  value={t.factStart?.toLocaleDateString('en-CA')}
  onChange={(e) => handleChangeInput(e, index, 'factStart')}
  onInput={(e) => {
    const originalDate = t.factStart?.toLocaleDateString('en-CA') || '';
    if (e.target.value !== originalDate) {
      e.target.value = originalDate;
    }
  }}
/>

方案3：结合readonly与点击触发日历 #

通过临时移除readonly属性触发日历弹窗，完成选择后重新添加readonly阻止键盘输入：

const handleDateClick = (e) => {
  e.target.removeAttribute('readonly');
  e.target.click();
  setTimeout(() => {
    e.target.setAttribute('readonly', 'readonly');
  }, 0);
};

<input
  className="date__input"
  type="date"
  key={t.id}
  value={t.factStart?.toLocaleDateString('en-CA')}
  onChange={(e) => handleChangeInput(e, index, 'factStart')}
  onClick={handleDateClick}
  readOnly
/>

内容的提问来源于stack exchange，提问作者dasper