如何禁止日期输入框的手动输入，仅允许通过选择按钮选择日期（兼容Chrome和Firefox）

嘿，我完全懂你遇到的困扰——Chrome里用onkeydown="return false"确实能阻止手动输入，但Firefox根本不吃这一套对吧？别慌，我整理了两个靠谱的跨浏览器解决方案，亲测有效：

方案一：拦截所有输入类事件（纯HTML/JS，无需CSS） #

直接给日期输入框绑定多个事件，全方位阻止手动输入的可能，同时保留选择按钮的功能：

<input type="date" onkeydown="return false" onpaste="return false" oninput="this.value = this.defaultValue">

• onkeydown="return false"：阻止键盘输入（Chrome生效，Firefox里部分场景也有用）
• onpaste="return false"：防止用户通过粘贴修改日期
• oninput="this.value = this.defaultValue"：针对Firefox的特殊处理——如果用户通过某些特殊操作（比如右键菜单的编辑选项）修改了内容，自动把值重置为初始值

方案二：用readonly属性配合CSS修复（更语义化） #

readonly属性本身就能阻止手动输入，但部分浏览器会连带禁用日期选择按钮，所以我们用CSS调整样式，让选择按钮恢复可用：
首先是HTML：

<input type="date" readonly class="date-picker">

然后添加CSS：

.date-picker[readonly] {
  background-color: #ffffff; /* 移除只读状态的灰色背景，保持和普通输入框一致 */
  cursor: pointer; /* 鼠标悬停时显示指针样式，提示可点击 */
}

/* 专门针对Firefox的兼容处理 */
@-moz-document url-prefix() {
  .date-picker[readonly] {
    pointer-events: auto; /* 让Firefox里的选择按钮能正常响应点击 */
  }
}

这个方案的优势是语义化更好，用原生属性控制输入权限，再通过CSS修复浏览器的样式问题，体验更统一。

你可以根据自己的需求选其中一种，测试下来这两种方法都能完美兼容Chrome和Firefox哦！

备注：内容来源于stack exchange，提问作者Flow