小云菜
小云菜
  • 发布:2015-07-30 18:05
  • 更新:2016-04-14 14:00
  • 阅读:4356

[报Bug] iphone页面保存时popPicker自动弹出来

分类:MUI

bug: iphone页面在input输入内容并保存时,在软键盘消失后会弹出popPicker.
代码如下:

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <link href="../../../css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" href="../../../css/head.css" />  
        <link rel="stylesheet" type="text/css" href="../../../css/mui.listpicker.css" />  
        <link rel="stylesheet" type="text/css" href="../../../css/mui.dtpicker.css" />  
        <link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />  
        <style type="text/css">  
            .mui-input-group {  
                margin: 10px 10px;  
            }  
            .mui-input-group:before,  
            .mui-input-group:after {  
                height: 0;  
            }  
            .mui-input-row:after {  
                height: 0 !important;  
            }  
            .my-hobby {  
                margin-right: 10px;  
                margin-bottom: 10px;  
            }  
            .my-hobby-selected {  
                background-color: #A9A9A9;  
                color: #FFFFFF;  
            }  
            input:read-only {  
                color: #646464;  
            }  
            input[type=text],  
            input[type=password],  
            input[type=tel],  
            input[type=number] {  
                border: 0;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title"></h1>  
            <button class="mui-btn mui-btn-link  mui-pull-right" style="color:white" id='btnsave'>保存</button>  
        </header>  
        <div class="mui-content">  
            <form class="mui-input-group">  
                <div class="mui-input-row" style="display: none;">  
                    <input type="text" id="name" name="name" class="mui-input-clear" placeholder="请输入您的艺名或姓名">  
                </div>  
                <div class="mui-input-row" style="display: none;">  
                    <input type="hidden" id="province" name="province" readonly="readonly">  
                    <input type="text" id="zone" name="zone" placeholder="请选择您的常驻城市" readonly="readonly">  
                </div>  

                <div class="mui-input-row" style="display: none;">  
                    <input type="text" id="experience" name="experience" placeholder="请选择您的从业年限" readonly="readonly">  
                </div>  
                <div class="mui-input-row" style="display: none;">  
                    <input type="text" id="market_price" name="market_price" placeholder="请输入市场价">  
                </div>  
            </form>  

        </div>  
        <script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>  
        <script src="../../../js/citydata.js" type="text/javascript" charset="utf-8"></script>  
        <script src="../../../js/listpicker.js" type="text/javascript" charset="utf-8"></script>  
        <script src="../../../js/poppicker.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            mui.plusReady(function() {  
                var cityPicker, expPicker;  
                var init = function() {  
                    //城市下拉框  
                    cityPicker = new mui.PopPicker({  
                        layer: 2  
                    });  
                    cityPicker.setData(cityData);  

                    expPicker = new mui.PopPicker();  
                    var expprms = [];  
                    for (var i = 1; i < 21; i++)  
                        expprms.push({  
                            value: i,  
                            text: i + '年'  
                        });  
                    expprms.push({  
                        value: '20+',  
                        text: '20年以上'  
                    });  
                    expPicker.setData(expprms);  
                };  
                var citySelect = function() {  
                    var obj = this;  
                    cityPicker.show(function(items) {  
                        var pattern = /.省|内蒙古|西藏|广西|宁夏|新疆/i;  
                        var addr = pattern.test(items[0].text) ? items[1].text : items[0].text;  
                        document.querySelector("#province").value=items[0].text.replace(/省|市/i, '');  
                        obj.value = addr;  
                        obj.setAttribute('data-value', addr);  
                    });  
                };  

                var experienceSelect = function() {  
                    var obj = this;  
                    expPicker.show(function(items) {  
                        obj.value = items[0].text;  
                        obj.setAttribute('data-value', items[0].value);  
                    });  
                };  

                var saveData = function(cb) {  

                };  

                var bindEvent = function() {  
                    document.querySelector('#btnsave').addEventListener('tap', saveData);  
                    document.querySelector('#zone').addEventListener('tap', citySelect);  
                    document.querySelector('#experience').addEventListener('tap', experienceSelect);  
                };  
                var showContainer = function() {  
                    var name = plus.webview.currentWebview().data.name || '';  
                    var mtitle = {};  
                    mtitle['name'] = '艺名/姓名';  
                    mtitle['zone'] = '常驻城市';  
                    mtitle['experience'] = '从业年限';  
                    mtitle['market_price'] = '市场价格';  
                    document.querySelector('.mui-title').innerText=mtitle[name];  
                    document.querySelector("#" + name).parentNode.style.display='block';  
                    if (name == "experience" || name == "zone") {  
                        //TODO ios上输入框--保存--出现bug: popPicker弹出,非调用不初始化  
                        init();  
                    }  
                };  
                showContainer();  
                    //init();  
                bindEvent();  
            })  
        </script>  
    </body>  

</html>
2015-07-30 18:05 负责人:无 分享
已邀请:
小云菜

小云菜 (作者) - 相关代码及分享在http://www.cnblogs.com/phillyx

虽然做了规避处理,不过在一些情况下是不好规避的。
上文只是在ready后做了规避,切换成以下的逻辑就麻烦了:
eg:
搜索界面有两种功能:日期搜索和输入名称搜索,且是预加载的,
解决方法是每次输入前删除DtPickDom 对象,这样频繁增删DOM 是非常不友好的。

测试机型是iphone4s

  • 小云菜 (作者)

    在ipad,iphone上都有问题

    2015-08-27 15:38

小云菜

小云菜 (作者) - 相关代码及分享在http://www.cnblogs.com/phillyx

好吧,在dtpicker.js添加以下代码是解决了bug。
猜测原因如下:
dtpicker以绝对定位在screen底部,且向下偏移300p'x,dtpicker局域可视区域外,在不弹出键盘的情况下是没问题的。不过当弹出键盘时,整个webview上移高度为键盘高度keyheight,在keyheight<300px下是很容易看到的,因此debug如下:向下偏移300px后,隐藏,不占空间。

.mui-dtpicker {  
    position: fixed;  
    left: 0px;  
    width: 100%;  
    z-index: 999999;  
    background-color: #eee;  
    border-top: solid 1px #ccc;  
    box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);  
    -webkit-transition: .3s;  
    bottom: 0px;  
    -webkit-transform: translateY(300px);  
}
//显示  
            show: function(callback) {  
                var self = this;  
                var ui = self.ui;  
                self.callback = callback || $.noop;  
                ui.mask.show();  
                //我加的  
                ui.picker.style.display='block';  
                ui.picker.style.webkitTransform = 'translateY(0px)';  
            },  
            hide: function() {  
                var self = this;  
                var ui = self.ui;  
                ui.picker.style.webkitTransform = 'translateY(300px)';  
                //我加的  
                setTimeout(function () {  
                    ui.picker.style.display='none';  
                },300);  
                ui.mask.close()  
            }
houfeng2016

houfeng2016

系统是什么版本?

andio

andio - xiezb

我也遇到这个问题

布拉宫

布拉宫

这个能说细一点不
cityPicker3.show:function(items) {
var itemText=items[0].text+""+items[1].text+" "+items[2].text;
var itemValue=items[0].value+","+items[1].value+","+items[2].value;
dataArr.address=itemValue;
//重新设置本地地区数据
J.dataAjax(CONFING.Interface.updateuserinfo,dataArr,function(data){
stateDate['address']=itemValue;
if(data.type=='0'){
plus.nativeUI.toast(data.msg);
}else{
plus.nativeUI.alert(data.msg);
cityResult3.innerText =itemText;
app.setStateDate(stateDate);
}
})
return false;
}
怎么解决popPicker自动弹出来

该问题目前已经被锁定, 无法添加新回复