您的位置:首页 > Web前端 > React

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

2018-02-13 14:31 2441 查看
今天项目修改日历插件,改好部署手机后发现,选择日期后,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;
}

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Ant Design React
相关文章推荐