Question

我有以下功能。当我单击按钮时，sweetalert2弹出窗口将打开easyautocomplete列表。这些项目在打字时由ajax提取。当项目太多而且它们不适合框时，会出现滚动条。

我想使用原始的easyatocomplete插件 - ＆gt; easyautocomplete.com＆lt; -

但它没有滚动条功能。所以我环顾四周，发现修改后的版本：

问题是，当我单击滚动条滚动位置滚动条消息并且列表关闭时。问题仅出现在IE（测试11和Edge）中，在FF和Chrome中都可以。

BUT !!正如我们在修改后的自动完成页面上看到的那样，滚动条工作正常，即使在IE中尝试用鼠标滚动它也不会消失。似乎只有在sweetalert2 popup中使用时才会发生。

这是我写的代码：

    function addEmployeeByName() {
        swal({
            title: 'Add employee by name',
            html: 'Select employee<input type="text" name="empList" id="empList" class="form-control"><input type="hidden" id="rcp">',
            type: '',
            confirmButtonText: 'Add employee',
            confirmButtonColor: '#00A65A',

            onOpen: function () {


                                    window.setTimeout(function () { 
                                            $("input#empList").focus();
                                    }, 0); 

                                    var options = {
                                        url: function(phrase) {
                                            return '/ajax/employees/get_handworkers_by_name/';
                                        },

                                        minCharNumber: 3,
                                        ajaxSettings: { 
                                                        dataType: "json", 
                                                        method: "POST", 
                                                        data: { dataType: "json" } 
                                                      },

                                        preparePostData: function(data) 
                                                         { data.employeename = $("#empList").val(); 
                                                           return data; 
                                                         },

                                        getValue: function(element) {
                                                        return '['+element.rcp+'] '+element.nazwisko+' '+element.imie;
                                                  },

                                        requestDelay: 400,

                                        list: {
                                            maxNumberOfElements: 1000,
                                            onChooseEvent: function() {
                                                sel_prac_rcp = parseInt($("#empList").getSelectedItemData().rcp);
                                                sel_prac_id = parseInt($("#empList").getSelectedItemData().id);
                                                $("#empList").blur();

                                              }
                                        }

                                    };

                                    $("#empList").easyAutocomplete(options);

            }, //end onOpen

        }).then(function(val){

        console.log(val);
    });

}

我查看了修改后的easyautocomplete插件并找到了这个（在1240行左右）：

           $container.on("mousedown", function(e) { 


                    if (!$wrap.is(e.target) // if the target of the click isn't the container...
                        && ($wrap.has(e.target).length === 0) // ... nor a descendant of the container
                        && (e.target !== $('html').get(0))) // nor the scrollbar
                    {
                        //console.log('slog0');
                        //console.log('slog:'+toolbarClose());
                    }

                    //console.log('slog2');
                    e.stopImmediatePropagation();
                    e.preventDefault();
                    e.stopPropagation();

                    //if (jQuery.browser.msie) {
                        e.originalEvent.keyCode = 0;
                        e.originalEvent.cancelBubble = true;
                        e.originalEvent.returnValue = false;
                    //}
                });

然而，使用这个片段不起作用。

http://gnnc.com.br/samples/easy-autocomplete/easy-autocomplete.php

Answer 1

我终于在这个帖子中找到了解决方案：

how to prevent focus event in IE when mousedown happens

我需要在函数createContainer（）中更改easyautocomplete hacked plugin jquery.easy-autocomplete.js文件中的行

从：

var $elements_container = $("<div>").addClass(consts.getValue("CONTAINER_CLASS"));

到

var $elements_container = $("<div onmousedown='return false' unselectable='on'>").addClass(consts.getValue("CONTAINER_CLASS"));

非常感谢

Answer 2

我在选择插件时遇到了同样的问题：

https://selectize.github.io/selectize.js/

在IE中单击滚动条时，它会消失。解决方案类似。在第1261行的方法设置中，我们有：

$dropdown_content = $('<div>').addClass(settings.dropdownContentClass).appendTo($dropdown);

我将其改为：

$dropdown_content = $('<div onmousedown="return false" unselectable="on">').addClass(settings.dropdownContentClass).appendTo($dropdown);

是什么解决了这个问题（希望不会破坏其他任何东西:)。

Easyautocomplete + sweetalert2 =在IE 11 / Edge中消失滚动条

2 个答案: