javascript - iPad 上的 jQuery Selectric 错误

Question

我使用 jQuery Selectric 插件来自定义选择。

$('select').selectric({
  disableOnMobile: false
});

如果我在 iPad 设备上打开选择，我的左列会上移

.left-column {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  background: #F00;
  z-index: 100;
}

请帮帮我。此处演示:http://output.jsbin.com/seleyi

UPD: 在 browserstack 测试 iOS < 7 - 没问题，iOS 8.3 - 有问题，iOS 9.1 有这个错误

Answer 1

这是iOS 9 的bug，在iOS 8 中包含，但在9 版本中包含了部分。

input 错误，属性 readonly="readonly"。 Selectric 使用隐藏输入:

发生了什么:

1. 如果点击selectric-wrapper启动方法_open。
2. 方法 _open 将焦点设置为隐藏 input.selectric-input。它制作了 selectric 插件，我不知道为什么。可能是，更简单地为隐藏元素上的击键添加监听器。并在元素具有焦点时处理此类事件。为什么要输入？如果您使用另一个元素，然后按下箭头键，我们也会滚动文档本身。因为，使用 input ，虽然我可能是错的。也许对电子阅读器来说更好的输入，即，用它来增强可访问性。

当焦点进入 input 时，尽管它是只读的，iOS(我认为是)会尝试为键盘分配空间。我可以建议一个简单的解决方法:

$(".selectric-input[readonly]").on("focus", function(evt) {
    this.blur();
}); 

即当焦点输入立即摆脱他时，因为在 iPad 上无法使用键盘在列表中移动，功能不应受到影响。