心如月
心如月
  • 发布:2016-06-22 12:01
  • 更新:2019-04-22 14:16
  • 阅读:5000

【报Bug】picker选择器和软键盘的冲突

分类:MUI

详细问题描述
[内容]在ios中,如果此页面内容很多,可以滚动,打开软键盘时候,如果这个页面也有picker选择器,如下图,也会弹出选择器,选择器显示在软键盘下面,demo里面也是这样。安卓是好的。

重现步骤
[步骤]进入一个内容较多的页面,例如我在demo的picker.html上面加了十来个input标签,如代码:
<!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>  
    <!--标准mui.css-->  
    <link rel="stylesheet" href="../css/mui.min.css">  
    <!--App自定义的css-->  
    <link rel="stylesheet" type="text/css" href="../css/app.css" />  
    <link href="../css/mui.picker.css" rel="stylesheet" />  
    <link href="../css/mui.poppicker.css" rel="stylesheet" />  
    <!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->  
    <style>  
        .mui-btn {  
            font-size: 16px;  
            padding: 8px;  
            margin: 3px;  
        }  
        h5.mui-content-padded {  
            margin-left: 3px;  
            margin-top: 20px !important;  
        }  
        h5.mui-content-padded:first-child {  
            margin-top: 12px !important;  
        }  
        .ui-alert {  
            text-align: center;  
            padding: 20px 10px;  
            font-size: 16px;  
        }  
    </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">picker(选择器)</h1>  
    </header>  
    <div class="mui-content">  
        <div class="mui-content-padded">  

            <div>  
            <label>  
                地点  
            </label>  
            <input id="course_address" name="course[address]" type="text" value="" placeholder="地点" class="mui-input-clear" />  
        </div>  
        <div>  
            <label>  
                地点  
            </label>  
            <input id="course_address" name="course[address]" type="text" value="" placeholder="地点" class="mui-input-clear" />  
        </div>  
        <div>  
            <label>  
                地点  
            </label>  
            <input id="course_address" name="course[address]" type="text" value="" placeholder="地点" class="mui-input-clear" />  
        </div>  
        <div>  
            <label>  
                地点  
            </label>  
            <input id="course_address" name="course[address]" type="text" value="" placeholder="地点" class="mui-input-clear" />  
        </div>  

            <h5 class="mui-content-padded">原生 SELECT</h5>  
            <select class="mui-btn mui-btn-block">  
                <option value="item-1">item-1</option>  
                <option value="item-2">item-2</option>  
                <option value="item-3">item-3</option>  
                <option value="item-4">item-4</option>  
                <option value="item-5">item-5</option>  
            </select>  
            <br />  
            <p>原生 SELECT(选择框)在不同的设备上UI可能会有差异,并且不支持多级联动(多个 SELECT 可实现,但较麻烦),故mui封装了picker组件,参见如下示例。</p>  
            <h5 class="mui-content-padded">普通示例</h5>  
            <button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>  
            <div id='userResult' class="ui-alert"></div>  
            <h5 class="mui-content-padded">级联示例</h5>  
            <button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>  
            <div id='cityResult' class="ui-alert"></div>  
            <button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>  
            <div id='cityResult3' class="ui-alert"></div>  
        </div>  
    </div>  
    <script src="../js/mui.min.js"></script>  
    <!--<script src="../js/mui.picker.min.js"></script>-->  
    <script src="../js/mui.picker.js"></script>    
    <script src="../js/mui.poppicker.js"></script>  
    <script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>  
    <script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>  
    <script>  
        (function($, doc) {  
            $.init();  
            $.ready(function() {  
                //普通示例  
                var userPicker = new $.PopPicker();  
                userPicker.setData([{  
                    value: 'ywj',  
                    text: '董事长 叶文洁'  
                }, {  
                    value: 'aaa',  
                    text: '总经理 艾AA'  
                }, {  
                    value: 'lj',  
                    text: '罗辑'  
                }, {  
                    value: 'ymt',  
                    text: '云天明'  
                }, {  
                    value: 'shq',  
                    text: '史强'  
                }, {  
                    value: 'zhbh',  
                    text: '章北海'  
                }, {  
                    value: 'zhy',  
                    text: '庄颜'  
                }, {  
                    value: 'gyf',  
                    text: '关一帆'  
                }, {  
                    value: 'zhz',  
                    text: '智子'  
                }, {  
                    value: 'gezh',   
                    text: '歌者'  
                }]);  
                var showUserPickerButton = doc.getElementById('showUserPicker');  
                var userResult = doc.getElementById('userResult');  
                showUserPickerButton.addEventListener('tap', function(event) {  
                    userPicker.show(function(items) {  
                        userResult.innerText = JSON.stringify(items[0]);  
                        //返回 false 可以阻止选择框的关闭  
                        //return false;  
                    });  
                }, false);  
                //-----------------------------------------  
                //级联示例  
                var cityPicker = new $.PopPicker({  
                    layer: 2  
                });  
                cityPicker.setData(cityData);  
                var showCityPickerButton = doc.getElementById('showCityPicker');  
                var cityResult = doc.getElementById('cityResult');  
                showCityPickerButton.addEventListener('tap', function(event) {  
                    cityPicker.show(function(items) {  
                        cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;  
                        //返回 false 可以阻止选择框的关闭  
                        //return false;  
                    });  
                }, false);  
                //-----------------------------------------  
                //                  //级联示例  
                var cityPicker3 = new $.PopPicker({  
                    layer: 3  
                });  
                cityPicker3.setData(cityData3);  
                var showCityPickerButton = doc.getElementById('showCityPicker3');  
                var cityResult3 = doc.getElementById('cityResult3');  
                showCityPickerButton.addEventListener('tap', function(event) {  
                    cityPicker3.show(function(items) {  
                        cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;  
                        //返回 false 可以阻止选择框的关闭  
                        //return false;  
                    });  
                }, false);  
            });  
        })(mui, document);  
    </script>  
</body>  

</html>
点击第一个input输入框,会弹出软键盘,将页面拉到最底部。
[结果]在软键盘上面显示出来picker选择器。
[期望]在软键盘上面不显示出来picker选择器。

运行环境
[系统版本]在最新的demo上面
[浏览器版本]ios
[IDE版本]
[mui版本]最新版本

附件
[代码片段]
[安装包]

联系方式
[QQ]1611212383
[电话]15300928917

2016-06-22 12:01 负责人:无 分享
已邀请:
不知不觉

不知不觉

我也遇到了同样的问题了,请问楼主解决了吗?如果解决了请告知我一下,谢谢

心如月

心如月 (作者)

首先用现在最新的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)
},
可以先在demo里面测试,因为现在最新的demo引入的js和之前的不一样

历练

历练

我也遇到了。该如何解决本来要弹出poppicker结果软键盘在最前面

642773238@qq.com

642773238@qq.com

我也遇到了同样的问题,IOS端已解决,但是安卓的会产生一个上弹再下降的过程,使用效果体验很差

  • zhzhl1993@163.com

    你是怎么解决的?能给下思路吗,谢谢!

    2017-06-27 15:42

  • 844869020@qq.com

    你好,请问你是怎么解决的呢

    2018-06-05 11:29

罗罗诺亚索隆

罗罗诺亚索隆

我把tap事件改成click事件就好了

1571849719@qq.com

1571849719@qq.com - 微微

哇,我现在遇到这个问题了,都快2019年了,有解决方案了吗,楼上加a.dispose();的会让我该弹picker的也不弹出了

1571849719@qq.com

1571849719@qq.com - 微微

哇,我也遇到过类似的问题(点击输入框弹出软键盘的时候,弹出picker选择器),我也试了上面大神说的方法,然后管用,但是会让我的项目变得更糟糕。该弹picker的也不弹出了
不断尝试以后我发现一个问题:就是如果我将页面滑动到最底部,然后再点击输入框,这个时候选择器就不会被触发。
document.getElementById("test_box").addEventListener("tap", function () {
if (mui.os.ios) {
console.log("当前为ios");
window.scrollTo(0, document.body.scrollHeight);//滚动到底部
}
});
所以我就给输入框加了一个点击事件,如果你点击了,就滚动到底部,然后完美解决

demo012

demo012

这个bug 还没有解决妈

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