为什么 Select2 在 iOS 设备上不能正常工作？

Question

我正在使用来自 Pixels Admin Template 的库 select2。我注意到它在桌面和安卓设备上运行良好。然而，在 iOS 设备上查看时，下拉菜单不会打开。我不知道为什么会这样。

$(document).ready(function() {
  var init = [];

  init.push(function() {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
      $(":focus").blur();
    });
  })

  window.PixelAdmin.start(init);
});

body .select2-container.select2-container--default.select2-container--open {
  top: 305px!important;
  left: 22px!important;
}

.select2.select2-container.select2-container--default.select2-container--below.select2-container--open {
  top: auto!important;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="pixel-admin.min.js"></script>
<link rel="stylesheet" href="pixel-admin.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="form-control" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="form-control" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

我为您添加了像素管理 js here。

注意当我在 iOS 设备上使用请求桌面站点功能时，它可以工作。

有什么建议吗？请帮助我。谢谢

Answer 1

我为你做了 2 个页面，第一个包含下拉菜单，在移动和桌面浏览器上将保持相同的视图、相同的功能。请用手机浏览器打开，

click here to view it ...

对于第二页，我已经调整了代码，下拉列表现在应该与像素和 select2 库一起使用，在移动/桌面浏览器上也保持相同的视图，

您将能够在移动浏览器上通过双击每个下拉菜单上的来使用它们以打开它并选择一个值，我已将其留给您，因此您可以根据需要更改它在 onclick 事件中，它会在选择桌面或移动浏览器时隐藏菜单。

// show/hide the menu when examples is clicked
$(".dropdown-toggle").on("click", function () {
$(".dropdown-menu").toggle();
});

//用于导航

$("#nav").on("click", "li", function () {
$("#menu-icon").click();
document.getElementById("flag").focus();
//$("#nav").slideToggle();
}); 

对于移动浏览器，您可以使用以下隐藏菜单

$(document).on('点击 touchstart', function () {}

请检查链接并找到使用的资源/文件

click here to view it ...

剩下的工作应该是 CSS 和样式代码，您可以随意控制它，因为我认为调整字段没有意义，而不接受您的意见。

至于解释我如何完成这项任务，实际上，我不得不限制 java-script 加载的方式，除此之外，我已经编辑了几乎所有的 js 库，并在 j 查询回退期间通过脚本 J.S 加载它们。

以下是实现此目的的步骤：

第一：

通过fallback加载jquery库

第二：

加载 admin-pixel.js 加载你的像素.css

第三步：

加载 select2.js 加载select2.css

它们必须按顺序加载，最后在加载上述代码后，您必须编写此代码，以便下拉菜单视图在移动浏览器上不会更改，并且将保持与桌面浏览器相同的功能，将它们放在脚本标签上先加载 J 查询然后加载 select 2 库后

$('select').select2({
minimumResultsForSearch: -1
});

最后的步骤：

你必须在你的 html 页面上写这些 Meta 标签和 css

<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta id="viewport" name="viewport" content="width=device-width,initial- 
scale=1.0,user-scalable=no">

CSS代码放在“”标签上：

html {
touch-action: manipulation;
}

根据您的要求，任务已完成，您可以查看所有代码 文件以查看js库如何按顺序加载您可以下载所有资源以及html页面

through this link ,

您的替代解决方案是， 远离您的图书馆，您可以创建它们在移动浏览器上运行没有问题的下拉列表字段，然后在有问题的页面上使用它们，并在用户选择这些工作下拉列表字段时，转换票价/移动损坏的值属于 select2（通过 java-script 执行并使用 display:none 隐藏损坏的下拉菜单；

这样做可能看起来很愚蠢，但这比在开发过程中遇到的所有这些错误要快得多

如果您遇到任何问题，请告诉我，因为我无法在您的生产服务器上执行测试。 我最终将编辑我的答案以调整我的答案。

祝你好运

Answer 2

如果您仍然遇到此问题：我在旧项目中使用相同模板遇到了同样的问题，并偶然发现了您的帖子。 该模板依赖于 pixel-admin.js 中用于移动设备的某个版本的 Fastclick。 升级其中的 Fastclick 库将为 select2 输入字段解决此问题。但是，它不会解决复选框和单选按钮的问题（它们需要双击才能选中或选中）。在这种情况下，移除对 Fastclick 的依赖为我们解决了这个问题。

Answer 3

不确定您想要实现什么，但如果您想将调用推送到数组中，您可以像下面这样：

var init = [];
init.push(
    $("#Salutation,#Gender").select2().on('select2:select select2:unselect', function () {
        $(":focus").blur();
    })
);

或者你可以像下面这样使用 IIFE：

var init = [];
init.push(function () {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
        $(":focus").blur();
    });
}());