使用 react-date-picker 时在移动设备上隐藏本机键盘

Question

我正在使用 react-date-picker，但是在移动设备上，单击时会显示本机键盘，导致日期选择器在顶部打开，这看起来不太好。在线解决方案是将 readonly 属性放在日期选择器绑定的输入字段上。但是 read-date-picker 组件不会让我通过那个道具......

对此有什么好的解决方案吗？

Answer 1

这readOnly是防止浏览器显示键盘和在移动设备上打字的不错选择。使用该readonly集合，您仍然可以在其上启动单击事件。

在谈论react-date-picker模块时，这在非移动设备中也很有用。

可以添加 option readOnly={true}，但它将完全禁用所有设备上的日期选择器输入，正如我们在以下问题中所见：

• Datepicker 不打开 readOnly=true #1443
• 禁用或只读输入字段 #961

此外，您还需要处理 onClick事件，我认为这不是一个好主意。

当前的解决方法

目前，在移动设备上禁用键盘并readOnly为所有 datePickers 输入设置的解决方案将编辑组件componentDidMount事件上的输入属性：

 componentDidMount() {
    const datePickers = document.getElementsByClassName("react-datepicker__input-container");
    Array.from(datePickers).forEach((el => el.childNodes[0].setAttribute("readOnly", true)))
};

Answer 2

<DatePicker
. . . . .
onFocus={(e) => e.target.readOnly = true}
/>

这对我有用。

Answer 3

所以我最终修改了 componentDidMount 生命周期中的输入元素，如下所示；

document.getElementsByTagName("input")[0].setAttribute("readonly", "readonly");

这会阻止我手机上显示本机可视键盘。然而，当鼠标悬停在输入字段上时，它会在桌面上创建这个“不允许的”红色丑陋光标，因此我通过定位日期选择器输入来修复该问题。

.react-datepicker-wrapper input[readonly]{cursor: pointer;}

不过，我欢迎其他解决方案。