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

【问题标题】：Hide native keyboard on mobile when using react-date-picker使用 react-date-picker 时在移动设备上隐藏本机键盘
【发布时间】：2018-02-15 10:32:30
【问题描述】：

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

有什么好的解决方案吗？

【问题讨论】：

标签： javascript reactjs react-datepicker

【解决方案1】：

readOnly 是防止浏览器在移动设备上显示键盘和打字的好选择。使用readonly 设置，您仍然可以在其上启动点击事件。

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

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

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

当前的解决方法

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

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

【讨论】：

【解决方案2】：

使用 React hooks 的可行解决方案

const pickerRef = useRef(null)

useEffect(() => {
    if (isMobile && pickerRef.current !== null) {
      pickerRef.current.input.readOnly = true;
    }
}, [isMobile, pickerRef]);

return (<DatePicker ref={pickerRef} ... />)

【讨论】：

或<DayPickerInput inputProps={{readOnly: isMobile}} />

【解决方案3】：

所以我最终在 componentDidMount 生命周期中修改了输入元素，就像这样；

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

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

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

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

【讨论】：

该代码没有考虑到文档中可以有多个输入这一事实。

【解决方案4】：

Caroline Waddell 回答的一个变体让我在 react-datepicker 2.8.0 上畅通无阻。日期选择器元素的id是date-picker-input，所以通过id获取属性后修改属性：

componentDidMount() {
    document.getElementById('date-picker-input').setAttribute('readonly', 'readonly');
  }

如果您的页面上有多个input，我就帮了大忙。

【讨论】：

【解决方案5】：

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

这对我有用。

【讨论】：

您没有提供任何原因说明您的解决方案是对已经提供的解决方案的改进。
这对我有用，是所有解决方案中最容易和最短实施的

【解决方案6】：

自己打这个。使用一个按钮创建一个自定义输入，该按钮使用所选值的文本打开选择器。

const ReadonlyInput = ({ value, onClick }: any) => (
  <button onClick={onClick}>
    {value}
  </button>
);

return (
  <ReactDatePicker
     selected={fieldValue}
    ...
     customInput = {<ReadonlyInput />}
   />
)

【讨论】：

【解决方案7】：

React datepicker 有 className react-datepicker__input-container。所以

const datePickers = document.getElementsByClassName(
      "react-datepicker__input-container"
    );

这将返回一个HTML collection，需要将其转换为数组。您可以使用Array.from，但这在 IE 11 中不受支持。所以，最好使用原生的for loop。所以

for (let i = 0; i < datePickers.length; i++) {
      datePickers[i].childNodes[0].setAttribute("readonly", true);
    }

【讨论】：

【解决方案8】：

我使用了类似 onChangeRaw={(e)=>handleDateChangeRaw(e)} 的东西，它让我可以禁用键盘类型选项，并设置了光标指针。

 const handleDateChangeRaw = (e:React.FormEvent<HTMLInputElement>) => {
        e.preventDefault();
      }

           <DatePicker                
                selected={(value && new Date(value)) || null}
               onChange={val => { onChange(name, val); }}
                dateFormat={ dateFormat }
                minDate={new Date()}
                timeIntervals={1}
                onChangeRaw={(e)=>handleDateChangeRaw(e)}
                />  
    .react-datepicker__input-container input {
       cursor: pointer;
    }

【讨论】：

【解决方案9】：

JSX (React) 使用只读选项创建自定义输入

const DateCustomInput = ({ value, onClick }) => (
    <input className="classes" readOnly onClick={onClick} placeholder='Date of 
    Birth' value={value}/>
 );

与 datePicker 一起使用

 <DatePicker
        id="preferred-date" name="EnquireNow[prefered_date]"
        selected={date}
        customInput={<DateCustomInput />}
    />

这将确保日历仍会弹出（使用 DatePicker 的 readOnly 道具不会发生这种情况）但不会弹出本机键盘。即使在桌面模式下，这也不允许编辑输入。只允许在移动设备上使用 readOnly

【讨论】：