我正在使用 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 设备上使用“请求桌面站点”功能时，它会起作用。
有什么建议吗？请帮助我。谢谢
最佳答案
我已经为您完成了 2 个页面，第一个 包含将保持相同 View 的下拉菜单，在移动和桌面浏览器上具有相同的功能。请通过手机浏览器打开，
对于第二页，我调整了代码，下拉列表现在应该与像素和选择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 () {}
请检查链接并找到使用过的资源/文件
剩下的工作应该是 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 页面
您的替代解决方案是， 远离您的图书馆，您可以创建在移动浏览器上运行没有问题的下拉列表字段，然后在有问题的页面上使用它们，并且在用户选择这些工作下拉列表字段时，转运/移动损坏的值属于 select2(通过 java 脚本执行并使用 display:none 隐藏损坏的下拉菜单；
这样做可能看起来很愚蠢，但这比处理您在开发您正在使用的折旧库时可能遇到的所有这些错误要快得多......
如果您遇到任何问题，请告诉我，因为我无法在您的生产服务器上执行测试。 我最终会编辑我的答案以调整我的答案。
祝你好运
关于javascript - 为什么 Select2 在 iOS 设备上不能正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52031081/
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返
它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput
我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？