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

Question

我正在使用 Pixels 管理模板中的库 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>

我为您提供了 pixel-admin js here .

注意 当我在 iOS 设备上使用“请求桌面站点”功能时，它会起作用。

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

Answer 1

我已经为您完成了 2 个页面，第一个 包含将保持相同 View 的下拉菜单，在移动和桌面浏览器上具有相同的功能。请通过手机浏览器打开，

click here to view it ...

对于第二页，我调整了代码，下拉列表现在应该与像素和选择2库一起工作，在移动/桌面浏览器上也保持相同的 View ，

您将能够在移动浏览器上使用它们，方法是双击每个下拉菜单打开它并选择一个值，我已经把它留给您了，所以您可以根据需要更改它在 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('点击触摸启动', function () {}

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

click here to view it ...

剩下的工作应该是 CSS 和样式代码，您可以随心所欲地控制它，因为我认为在不考虑您的意见的情况下调整字段毫无意义。

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

实现步骤如下:

首先:

通过fallback加载jquery库

第二个:

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

第三步:

加载select2.js加载 select2.css

它们必须按顺序加载，最后在加载完上面的代码后，你必须编写这段代码，这样下拉菜单 View 在移动浏览器上不会改变，它将保持与桌面浏览器相同的功能，把它们放在脚本标签上在先加载 J 查询然后加载 select 2 库之后

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

最后的步骤:

你必须在你的 html 页面上写这些元标记和 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 脚本执行并使用 display:none 隐藏损坏的下拉菜单；

这样做可能看起来很愚蠢，但这比处理您在开发您正在使用的折旧库时可能遇到的所有这些错误要快得多......

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

祝你好运