1. 程式人生 > >react Ant Design 日曆外掛input導致移動裝置彈出鍵盤問題

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;
}