2017-09-26 118 views
0

我有以下功能。当我点击按钮的时候,sweetalert2弹出窗口随easyautocomplete列表打开。这些项目在输入时由ajax提取。如果物品太多,并且它们不适合框中的滚动条出现。Easyautocomplete + sweetalert2 = IE 11中的消失滚动条/边缘

我想用原来的easyatocomplete从插件 - > easyautocomplete.com < -

,但它并没有滚动条functionality.So我环顾四周,发现这里修改的版本:

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

问题是当我单击滚动条滚动位置滚动条消除器和列表关闭。这个问题只发生在IE(经过测试的11和Edge)中,在FF和Chrome中是可以的。

但是!!正如我们在修改后的自动完成页面上的演示中看到的,滚动条工作正常,即使在IE中尝试使用鼠标滚动后也不会消失。这似乎只有在sweetalert2弹出窗口中使用时才会发生。

这里是我写的代码:

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; 
        //} 
       }); 

这个片段没有工作,但是玩。

dissapearing scrollbar issue - animated gif

回答

0

我终于发现在这个线程解决方案:

how to prevent focus event in IE when mousedown happens

我需要改变线路在功能createContainer easyautocomplete砍死插件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"));

非常感谢

0

我也碰到了同样的问题在selectize插件:

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); 

什么问题解决了(希望不是breking别的:)