react Ant Design 日历插件input导致移动设备弹出键盘问题

今天项目修改日历插件,改好部署手机后发现,选择日期后,input会获得焦点,导致键盘弹出,会挡住日历插件,总之页面很难看。

查了api等等,都没有想过属性可以设置input。我的想法是,disable掉input。但是问题是js怎么能拿到input呢?

react Ant Design 日历插件input导致移动设备弹出键盘问题

日历插件部分,在日历触发弹出过,会在根html里添加这个div部分,js获取到input DOM再去操作(disable),因为没有id,导致这个方案并没有实现。于是,我想到通过css实现:

首先,先把包裹input的div隐藏掉:

.ant-calendar-picker-container.ant-calendar-picker-container-placement-bottomLeft .ant-calendar-input-wrap {
  display: none;

}

然后,把下面日历实体部分,相对打开的input设置top值,即可。


.ant-calendar.ant-calendar-time {
  position: relative;
  top: 36px;
}

react Ant Design 日历插件input导致移动设备弹出键盘问题