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;
}
查了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;
}
相关文章推荐
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题
- Ant Design of React Table 删除一行后selectedRowKeys残留和显示打钩残留问题
- js设置文本框聚焦时置顶,失去焦点时恢复位置(适用于移动设备软键盘遮挡问题)
- textbox点击后弹出系统键盘导致背景重置为白色的问题
- 阻止jquery datepicker控件在移动设备上被点击时弹出输入键盘
- 解决移动端键盘弹起 导致input布局出现问题的解决方法
- 【原创】解决启用GPRS模块,手持设备就会弹出USB 同步对话框,一闪而过并且导致GPRS再也无法链接的问题(作者:gooogleman)
- react native TextInput无法弹出输入框问题
- 移动端fixed和input获取焦点软键盘弹出影响定位的问题
- 使用IQKeyBoardManger 键盘弹出时导航栏也移动的问题
- fastclick插件 导致 input[type="date"] 无法触发问题解决方案
- 使用IQKeyBoardManger 键盘弹出时导航栏也移动的问题
- 解决Android弹出软键盘导致的问题
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- phonegap阻止键盘弹出导致的页面移动
- React Native 键盘管理和 Tab Navigator 在Android TextInput遮盖,Tab Navigator上移等问题解决办法
- iOS下Html页面中input获取焦点弹出键盘时挡问题
- React Native TextInput键盘遮挡输入款问题
- MUI 当input聚焦之后,弹出自带的键盘之后,内容往上移动