safari上的动态隐藏选择列表

Question

也许我做错了，但下面是在select元素上实现的行为：

我用几个<select>创建了一个页面，并使用样式表定制了它们。

对于一个特定的选项，我在它之后添加了一个带有样式position: absolute;的position: absolute;，它显示了一个带有复选框的列表，允许多个选择。

这个<select>有一个联合国新闻中心的<option> -它的目的是显示一个像“选择你的选择”这样的标题。

为了显示我的自定义列表而不是选项列表，根据主浏览器的兼容性，我必须实现如下onclick函数：

function showList(input,sIdTarget)
{
    //hide the dropdown list, compatible with all browser
    $(input).css({ "display": "none" }).blur().css({"display": "" });
    $("#"+sIdTarget).css("display","");
}

我还是对Safari有意见。在单击列表中的一个元素后，在onclick事件上调用此函数将触发该函数。

下面是一个示例：https://jsfiddle.net/L6uhkg9h/1/

谢谢你的帮助。

Answer 1

与其在用户选择下拉列表之后使用JQuery隐藏下拉列表，不如禁用下拉列表并将单击处理程序附加到父DIV。在pointer-events: none元素上设置select样式将阻止该元素响应任何单击事件。然后，可以将单击处理程序附加到.customSelect。

$('.customSelect').on('click.selectList', function(e) {
  e.stopPropagation();
  if($("#listeSecteurs").css("display") === "none")
    $("#listeSecteurs").css("display","");
  else
    $("#listeSecteurs").css("display","none");
});

当用户单击.customSelect DIV时，您将切换是否显示#listeSecteurs。当用户单击#listSecteurs以外的任何内容时，您希望摆脱#listSecteurs，因此将单击处理程序附加到window以执行以下操作：

$(window).on('click.selectListWindow', function(e) {
      $("#listeSecteurs").css({"display":"none"});
});

注意，e.stopPropagation()处理程序中的.customSelect将防止在单击.customSelect div时触发此窗口单击处理程序。您还需要停止单击事件从.hideableSelectList传播到window，因为当用户单击前者时，您希望保持#listSecteurs显示。

$('.hideableSelectList').on('click.selectList', function(e) {
  e.stopPropagation();
});

把这一切结合在一起：

​

<html>
  <head>
  <style>
  .customSelect{
    width: calc(100% - 2px);
    background-color: white; 
    border: solid 1px #AAAAAA;
    border-top-width: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;            
}     
.customSelect select{
    width: 100%; 
    padding: 5px 8px;
    border: 0px;        
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow:hidden; 
}
.customSelect select.collapse{
    background: transparent url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat; 
    background-size: 10px;
    background-position: right 10px center;
}
.customSelect select.expanded{
    background: transparent url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/cross-24-128.png') no-repeat; 
    background-size: 10px;
    background-position: right 10px center;
}
.hideableSelectList{
    position: relative;    
}
.hideableSelectList div{
    background-color: white;
    max-height: 300px;
    width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    padding: 0px 10px;
    border: solid 1px #C0C0C0;
    z-index: 3;
}
  </style>
  </head>
  <body>
  <div class="customSelect" style="width: 195px;">
    <select class="collapse" style="width: 195px; z-index: 0; pointer-events: none" >
        <option style="height: 0px">-&nbsp;Select your options&nbsp;-</option>
    </select><br>
    <div class="hideableSelectList" style="z-index: 10;">
        <div id="listeSecteurs" style="display: none; left: 0px;">
          <ul style="list-style-type: none;">
            <li><input type="checkbox">val 1</li>
            <li><input type="checkbox">val 2</li>
            <li><input type="checkbox">val 3</li>
            <li><input type="checkbox">val 4</li>
            <li><input type="checkbox">val 5</li>
          </ul>
        </div>
    </div>
</div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>

  $(function () {

    $('.hideableSelectList').on('click.selectList', function(e) {
      e.stopPropagation();
    });

    $('.customSelect').on('click.selectList', function(e) {
      e.stopPropagation();
      if($("#listeSecteurs").css("display") === "none")
        $("#listeSecteurs").css("display","");
      else
        $("#listeSecteurs").css("display","none");
    });

    $(window).on('click.selectListWindow', function(e) {
          $("#listeSecteurs").css({"display":"none"});
    });
  });

  </script>
</html>

​

Answer 2

如果不是几乎不可能的话，以跨浏览器的方式重新设计select option真的很难。

如果您需要保持尽可能高的跨浏览器兼容性，并且已经有了自定义样式选项下拉，那么您现在需要的是选择中的可调和可选项选项。

在下面的建议中，我不再使用select，而是使用input button在窗体元素之间允许鼠标和键盘导航，并避免与不同浏览器特定的select实现相关的样式(下拉)和行为(单击、焦点事件)问题。

input button将维护本机焦点行为，并在其他浏览器(FF、Chrome、IE等)中提供与Safari中的所有其他表单元素以及虚线边框相同的焦点阴影。

关于键盘和鼠标导航，您仍然需要一些全局处理程序，因为您的自定义下拉部分将在代码中处理。

在我的建议中，您还会在下拉列表中的checkboxes中找到一个键盘导航的例子，它也处理隐藏和/或禁用元素的情况。

​

function toggleSelectList(el) {
  var customSelect = $(el).closest(".customSelect");
  if (customSelect.length > 0) {
    if ($(el).hasClass("customSelectFocus")) {
      if ($(customSelect).children(".customSelectList").css("display") === "none") {
        clickSelectFocus(customSelect);
        blurSelectFocus(customSelect);
      } else {
        hideSelectList(customSelect);
        focusSelectFocus(customSelect)
      }
    } else {
      // mouse down inside custom drop down list
    }
  } else {
    // mouse down outside any custom select
    hideAllSelectLists();
  }
}

function handleSelectNavigation(e, key) {
  var customSelect = $(".customSelectList").filter(":visible").closest(".customSelect");
  var all = $(".customSelectList input:visible:enabled");
  var first = all[0], last = all[all.length - 1], current = $(".customSelectList input:focus");
  var currentIndex = $(all).index(current);
  switch (key) {
    case 9: // tab
      if(e.shiftKey == 1) {
        if ($(first).is(":focus")) {
          e.preventDefault();
          $(last).focus();
        }
      } else {
        if ($(last).is(":focus")) {
          e.preventDefault();
          $(first).focus();
        }        
      }
      break;
    case 13: // enter
      toggleSelectList(e.target);
      break
    case 27: // escape
      hideAllSelectLists();
      focusSelectFocus(customSelect);
      break
    case 38: // up arrow
      $(first).is(":focus") ? $(last).focus() : $(all)[currentIndex - 1].focus();
      break
    case 40: // down arrow
      $(last).is(":focus") ? $(first).focus() : $(all)[currentIndex + 1].focus();
  }
}

$(document).on("mousedown", function(e) {
  toggleSelectList(e.target);
});

$(document).on("keydown", function(e) {
  var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var cases = [9, 13, 27, 38, 40];
  if ($.inArray(key, cases) > -1) handleSelectNavigation(e, key);
});

function setSelectLabel(customSelect) {
  var numSelected = $(customSelect).children(".customSelectList").find("input:checked").length;
  var text = (numSelected === 0) ? "- Select your options -" : " %1 option(s) selected".replace("%1", numSelected);
  $(customSelect).find(".customSelectFocus").val(text);
}

function focusSelectFocus(customSelect) {
  setTimeout(function() {
    $(customSelect).find(".customSelectFocus").focus();
  }, 0);
}

function blurSelectFocus(customSelect) {
  setTimeout(function() {
    var firstInput = $(customSelect).find(".customSelectList input:visible:enabled").first();
    var selectFocus = $(customSelect).find(".customSelectFocus").first();
    firstInput.length > 0 ? $(firstInput).focus() : $(selectFocus).blur();
  }, 0);
}

function clickSelectFocus(customSelect) {
  $(".customSelect").not(customSelect).each(function() {
    hideSelectList(this); // hiding all other than the one clicked
  });
  if ($(customSelect).children(".customSelectList").css("display") === "none") {
    showSelectList(customSelect);
  } else {
    hideSelectList(customSelect);
  }
}

function showSelectList(customSelect) {
  $(customSelect).children(".customSelectList").css("display", "");
  $(customSelect).find(".customSelectFocus").addClass("expanded").removeClass("collapse");
}

function hideSelectList(customSelect) {
  $(customSelect).children(".customSelectList").css("display", "none");
  $(customSelect).find(".customSelectFocus").addClass("collapse").removeClass("expanded");
  setSelectLabel(customSelect);
}

function hideAllSelectLists() {
  $(".customSelect").each(function() {
    hideSelectList(this);
  });
}

$(document).ready(function() {
  $(".customSelect").each(function() {
    setSelectLabel(this);
  });
  $(".customSelect input[type=checkbox]").change(function() {
    setSelectLabel($(this).closest(".customSelect"));
  });
  focusSelectFocus($(".customSelect").first());
});

.customSelect {
  width: 195px;
  margin-left: -5px;
  padding: 5px;
  border: 0 none transparent;
  display: inline-block;
  position: relative;
}

.customSelectBox {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid #AAAAAA;
}

.customSelectFocus {
  width: 100%;
  height: 100%;
  padding: 5px;
  border: 0 none transparent;
  display: inline-block;
  text-align: left;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.customSelectFocus.collapsed {
  background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAB3RJTUUH4QUIDC0RXxhGYQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxjwv8YQUAAAA1SURBVHjaY2AYcHAFiP/jwJeRFSoB8Qssil5A5VCAARB/RFIEYuvjcoIdEL+DYtuBDg8oAACLqxRIufkW/wAAAABJRU5ErkJggg==") no-repeat;
  background-size: 10px;
  background-position: right 10px center;
  background-position: top 10px right 6px;
  background-position-x: 178px;
  background-position-y: 8px;
}

.customSelectFocus.expanded {
  background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAB3RJTUUH4QUIDCwtaWwLpwAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAACESURBVHjaZZBBCoMwEEUHD2Ndil3b64veQN3ZlSktinGlYP/IDIxj4EGS/xJ+QkT0ABXI6T4uWQ0OMDo5BYNkHW88wcfJVprBS0+zHCT4ygGeT1bSUYCfCEwEpYaJEVewmfUOFn9bZjpF6XV7IEtv06mUGsHLjZNsZ/2NVjd6J9nfOLM/MU0xq4g4dtgAAAAASUVORK5CYII=") no-repeat;
  background-size: 10px;
  background-position: right 10px center;
  background-position: top 10px right 6px;
  background-position-x: 178px;
  background-position-y: 8px;
}

.customSelectList {
  position: relative;
  z-index: 10;
  font: -webkit-small-control;
  font-size: 14px;
  font-family: "MS Shell Dlg \32";
  font-weight: 400;
}

.customSelectList div {
  background-color: white;
  max-height: 300px;
  width: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  padding: 0 10px;
  border: solid 1px #C0C0C0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>
  <div class="customSelect">
    <div class="customSelectBox">
      <input type="button" class="customSelectFocus collapsed" value="- Select your options -">
    </div>
    <div class="customSelectList" style="display: none;">
      <div>
        <ul style="list-style-type: none;">
          <li>
            <input type="checkbox">val 1</li>
          <li>
            <input type="checkbox" checked="checked">val 2</li>
          <li>
            <input type="checkbox">val 3</li>
          <li>
            <input type="checkbox">val 4</li>
          <li>
            <input type="checkbox">val 5</li>
        </ul>
      </div>
    </div>
  </div>

  <hr>

  <div class="customSelect">
    <div class="customSelectBox">
      <input type="button" class="customSelectFocus collapsed" value="- Select your options -">
    </div>
    <div class="customSelectList" style="display: none;">
      <div>
        <ul style="list-style-type: none;">
          <li>
            <input type="checkbox" disabled="disabled">val 1</li>
          <li>
            <input type="checkbox" disabled="disabled" checked="checked">val 2</li>
          <li>
            <input type="checkbox" disabled="disabled" checked="checked">val 3</li>
          <li>
            <input type="checkbox" disabled="disabled">val 4</li>
          <li>
            <input type="checkbox" disabled="disabled">val 5</li>
        </ul>
      </div>
    </div>
  </div>
  <hr>

</body>

</html>

​

Answer 3

也许你应该考虑使用一些jQuery插件来进行多选择？例如，这个https://select2.github.io/examples.html