mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时,日历选择页面错乱bug

 

1 设置弹出软键盘时自动改变webview的高度

plus.webview.currentWebview().setStyle({  
    softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度  
});  

2 增加样式

html, body {  
    height: 100%;  
    margin: 0px;  
    padding: 0px;  
    overflow: hidden;  
    -webkit-touch-callout: none;  
    -webkit-user-select: none;  
}  

.mui-content {  
    height: 100%;  
    overflow: auto;   
}  

 

ios 中input软键盘和dtpicker日历插件页面错乱

mui  ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时,日历选择页面错乱bug

 

解决方法

首先用现在最新的demo的最新引入的picker的插件 js,然后在mui.picker.min.js文件里面添加了俩句话a.dispose();,如下代码:,e.DtPicker = e.Class.extend({
init: function(n) {
var a = this,
r = e.dom(i)[0];
t.body.appendChild(r), e('[data-id="picker"]', r).picker();
var s = a.ui = {
picker: r,
mask: e.createMask(),
ok: e('[data-id="btn-ok"]', r)[0],
cancel: e('[data-id="btn-cancel"]', r)[0],
y: e('[data-id="picker-y"]', r)[0],
m: e('[data-id="picker-m"]', r)[0],
d: e('[data-id="picker-d"]', r)[0],
h: e('[data-id="picker-h"]', r)[0],
i: e('[data-id="picker-i"]', r)[0],
labels: e('[data-id="title-"]', r)
};
s.cancel.addEventListener("tap", function() {
a.hide();
a.dispose();//自己加的 。ios点击取消按钮后,再弹出软键盘的时候,会弹出日历选择器,所以要释放日历选择器
}, !1), s.ok.addEventListener("tap", function() {
var e = a.callback(a.getSelected());
e !== !1 && a.hide()
}, !1), s.y.addEventListener("change", function(e) {
a.options.beginMonth || a.options.endMonth ? a._createMonth() : a._createDay()
}, !1), s.m.addEventListener("change", function(e) {
a._createDay()
}, !1), s.d.addEventListener("change", function(e) {
(a.options.beginMonth || a.options.endMonth) && a._createHours()
}, !1), s.h.addEventListener("change", function(e) {
(a.options.beginMonth || a.options.endMonth) && a._createMinutes()
}, !1), s.mask[0].addEventListener("tap", function() {
a.hide();
a.dispose();//自己加的。ios点击取消按钮后,再弹出软键盘的时候,会弹出日历选择器,所以要释放日历选择器
}, !1), a._create(n), a.ui.picker.addEventListener(e.EVENT_START, function(e) {
e.preventDefault()
}, !1), a.ui.picker.addEventListener(e.EVENT_MOVE, function(e) {
e.preventDefault()
}, !1)
},

 

上一篇:第七周-计算机网络技术


下一篇:微信小程序day03_05之form组件之picker普通选择器