Question

我正在使用Pixels Admin Template中的库select2。我注意到它在台式机和Android设备上运行良好。但是，在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>

我为您提供了here的pixel-admin js。

注意，当我在iOS设备上使用“请求桌面网站”功能时，该功能就可以使用。

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

Answer 1

我已经为您完成了2页，第一个包含用于保持移动设备和台式机浏览器相同视图，相同功能的下拉菜单。请通过移动浏览器打开它，

click here to view it ...

对于第二页，我已经调整了代码，下拉列表现在应该可以与pixel＆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（'click touchstart'，function（）{}

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

click here to view it ...

剩下的工作应该是CSS和样式代码，您可以根据自己的喜好进行控制，因为我认为调整字段毫无意义，而无需对此发表意见。

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

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

第一：

通过后备加载jQuery库

第二个：

加载admin-pixel.js 加载your-pixel.css

第三步：

加载select2.js 加载select2.css

必须依次加载它们，最后加载以上代码后，您必须编写此代码，以便下拉菜单视图在移动浏览器上不会更改，并且将保持与桌面浏览器相同的功能，将它们放在script标签上先加载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-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();
    });
}());

为什么Select2在iOS设备上无法正常运行？

3 个答案: