Html – How can I disable keyboard input for date inputs in Firefox?

To prevent keyboard input, you can use the onKeyPress event handler, which will prevent data input if the character code does not match the control key codes (for example, Tab, Backspace, Enter, etc.).

<input
  className="date__input"
  type="date"
  key={t.id}
  value={t.factStart?.toLocaleDateString('en-CA')}
  onChange={(e) => handleChangeInput(e, index, 'factStart')}
  onKeyPress={(e) => {
    const controlKeys = [0, 8, 13]; // 0 = Tab, 8 = Backspace, 13 = Enter
    if (!controlKeys.includes(e.charCode)) {
      e.preventDefault();
    }
  }}
/>

In this example, each time a key is pressed, the onKeyPress handler is called, which checks whether the character code is one of the allowed ones. If this is not the case, then e.preventDefault() is called, which stops the character input.

However, there are some nuances related to the fact that Firefox allows you to enter dates using the keyboard in fields with the "date" type. This is due to the peculiarities of the implementation of this element water in different browsers developer.mozilla.org . Therefore, if you want to completely deactivate keyboard input, you can try using a custom date input element or a third-party library.