react Ant Design 日历插件input导致移动设备弹出键盘问题
今天项目修改日历插件,改好部署手机后发现,选择日期后,input会获得焦点,导致键盘弹出,会挡住日历插件,总之页面很难看。
查了api等等,都没有想过属性可以设置input。我的想法是,disable掉input。但是问题是js怎么能拿到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;
}