使用react-date-picker时在手机上隐藏本机键盘 [英] Hide native keyboard on mobile when using react-date-picker

问题描述

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

I'm using react-date-picker, but on mobile the native keyboard shows up when clicked causing the date-picker to open on top, which doesn't look great. The online solution is to put the readonly attribute on the input field the date picker is bind with. But the read-date-picker component won't let me pass that prop...

对此有什么好的解决方案?

Any nice solutions for this?

推荐答案

readOnly是防止浏览器在移动设备上显示键盘和键入内容的好方法.设置readonly后，您仍然可以在其上启动click事件.

The readOnly is a good option to prevent the browser showing the keyboard and the typing on mobile. With the readonly seted you will still be able to launch a click event on it.

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

When, talking about the react-date-picker module the this will be also useful in non-mobile devices.

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

It is possible to add the option readOnly={true}, but it will disable completely the datepicker inputs on all devices, as we can see on the following issues:

• 日期选择器无法使用readOnly = true#1443
打开>
• 禁用或只读输入字段#961

• Datepicker does not open with readOnly=true #1443
• make disable or readonly input field #961

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

Also, you will need to handle the onClick event and I don't think that this is a good idea.

目前，使键盘在移动设备上禁用并为所有datePickers输入设置readOnly的解决方案将是在组件

At the moment, the solution to make the keyboard disabled on mobile and set the readOnly for all datePickers inputs will be edit the input properties on the component componentDidMount event:

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

这篇关于使用react-date-picker时在手机上隐藏本机键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！