jQuery iPadのセレクトバグ

Question

私はjQuery Selectricプラグインを使用して、選択をカスタマイズしています。

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

私は私の左の列は、

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

をしてください上に移動し、それを助けるのiPadデバイス上で選択し開きます。ここでのデモ：http://output.jsbin.com/seleyi

UPD：browserstackのiOS < 7でテスト - 問題はない、iOSの8.3 - いくつかの問題を抱えている、のiOS 9.1は、このバグを持っている

Answer 1

それはバグのiOS 9ですが、中に含まiOS 8が、9バージョンでは部分的に含まれています。

バグはinputで、属性はreadonly="readonly"です。 Selectric利用の皮入力：

1. selectric-wrapper startメソッド_openをクリックした場合：起こる何

   

   。

2. メソッド_openは、フォーカスを非表示に設定しますinput.selectric-input。それはselectricプラグインを作成し、私は理由を知らない。もっとシンプルにすると、隠れ要素のキーストロークのリスナーを追加することができます。アイテムにフォーカスがあるときは、そのようなイベントを処理します。なぜinputですか？別の要素を使用して矢印キーを押すと、ドキュメント自体もスクロールします。入力を使用するので、私は間違っている可能性があります。たぶんeリーダーのためのより良い入力、すなわちアクセシビリティを高めるためにそれを使用します。

入力が集中すると、読み込み専用であるにもかかわらず、iOS（私はそうだと思います）はキーボードのスペースを割り当てようとします。キーボードを使用して、リスト内を移動することは不可能のiPad上で、機能が損なわれてはならないので、フォーカス入力はすぐに、彼の解消を

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

すなわち：私は簡単な回避策を助言することができます。