2011-05-23 2 views
15

私は希望がありませんが、念のために尋ねます。iOS上のJavaScript:HTML選択要素を開く

モバイルSafari for iPhone/iPadでJavaScriptを使用して選択要素を開くことができます。

大量のGoogle /スタックオーバーフロー検索では、一般的にブラウザでこれを行うことができるようにすることを希望していますが、サポートされていません(理由は分かりません)。 をselect要素に呼び出し、そのsizeのプロパティを変更してoption要素を表示させるか、<div><ul>要素の完全モック選択要素を作成するなど、さまざまなハッキングが提案されています。しかし、iPadとiPhoneのネイティブブラウザの選択コントロールを使用するのが好きです。

これを行うにはApple独自のWebKitメソッドを知っている人がいるかもしれません。 select要素は、現在オープン/アクティブであるか否かと言う

ボーナスとして
var myselect = document.getElementsByTagName("select")[0]; 
myselect.open(); // this method doesn't exist 

、また、ブール型プロパティを知っていると便利だろう(つまり、だけではない要素かどうか:それのようなものになるだろう焦点がある)。クリックイベントや変更イベントを追跡することでこれを解決できることはわかっていますが、単純なプロパティが役立ちます。

賢明な考えですか?


UPDATE:
私はまだ答えを持っていないが、私はmousedownをシミュレートすることに成功しそうでGoogle Chromeのselect要素を開きますが、ないiPadやFirefoxとすることを発見しました:

function simulateMouseEvent(eventName, element) { 
    var evt = document.createEvent("MouseEvents"); 
    evt.initMouseEvent(eventName, true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    element.dispatchEvent(evt); 
} 

simulateMouseEvent("mousedown", select); 

UPDATE:私はここに選択ボックスに関連するが、異なる(!と同様に未回答)の質問をしてきました
Is there a DOM event that fires when an HTML select element is closed?

+0

を見ることができないあなたはその要素をクリック/タップを強制できますか? – Seth

+0

達成したい効果を教えてください。ユーザーのための付加価値とはどういう意味ですか? – mplungjan

+1

@セス - どう? @mplungjan - SVGベースのデータビジュアライゼーションアプリケーションで、さまざまなジェスチャーが異なる結果を引き起こす可能性があります。たとえば、ユーザーは画面上で円をドラッグすることができますが、同じサークルに指のタップが1つ与えられている場合は、選択肢の多い選択ボックスが表示されます。私は2つのクリックを必要としたくありません:1つは選択/フォーカスに、1つはオプションを表示することです。私はselect要素をユーザーがやりとりする要素にすることができるので、クリックすると開き、select要素がドラッグされた場合は円要素を移動できますが、可能ならばそれを避けることをお勧めします。 – Premasagar

答えて

3

JSを使用してHTMLコントロールをトリガすることは、セキュリティ上の理由の一部とサポートの不足のために、非常に灰色の領域です。 jQueryのようなフレームワークを使用しても、ボタン上でclick()と同じ方法でそれに続くリンクを単にclick()にすることはできません。ブラウザレベルでネイティブのクリックイベントをトリガーする必要があります(これはSeleniumの最新バージョンこのフレームワークはこの問題には適していません)。 Chromeで部分的な結果を達成できることにおめでとう!ただし、実際の選択入力を使用する汎用ソリューションはありません。

別のタイプのコントロールを使用することをお勧めします。機能を有効にするにはボタンを縦に積み重ねるか、ラベルを付けるにはラジオボタンをスタックします(小さなCSSで)。マルチ選択形式。

0

change()メソッドを試しましたか?

+0

私はあなたが何を示唆しているのか分かりません。 'change'イベントを検出してもselect要素は開かれません。 – Premasagar

1

select要素が表示されている必要があります。 あなたはjQueryのを使用する場合は、次のようにあなたがそれを行うことができます。モバイルで

$('mySelectElementSelector').focus(); 

を、デフォルトの選択コントロールが表示されます。デスクトップ上では、選択コントロールに集中します。

11

私は最近のバージョンのiOSとAndroidで動作するこのための解決策があります。私はまだ古いバージョンでテストしていません。 2つの方法はありません。このソリューションはハックです。しかし、慎重に実装されていれば動作します

私の状況では、私はiOS 7スイッチのようなトグルスイッチがありました。スイッチをオンにしたときにselectのピッカー表示が表示されるようにしたいと思いました。私の場合、ユーザはフィールドselectを見る必要はなく、ユーザには見せたくありませんでした。 iOSの素敵なスクロールピッカーインターフェイスを使いたかっただけです。

selectをスイッチの上に完全に配置して伸ばすためにCSSを使用しました。私はそれから、opacity: .001;のようなものにCSSのopacityを設定します。これは、すべての目的と目的に見えないようにします。それはまだ不透明度0で動作するかもしれませんが、私は少し不透明を残していると感じましたが、より安全かもしれないし、とにかくそれをすべて見ることはできません。ユーザーがスイッチを表示している画面の領域をタップすると、タップイベントは実際にはselectになり、ピッカービューが表示されます。

selectonchangeイベントでは、display: none;selectを完全に隠すように設定しました。これは、ユーザがスイッチをタッチしてスイッチをオフにすると、スイッチ自体と相互作用していることを意味します。スイッチがオフに切り替わると、display: blockを設定してselectをアクティブ状態に戻します。

私の使用例は狭いですが、フィールドを表示したい場合は、2つのselect要素を持つ必要があるかもしれませんが、位置/不透明度技法は多くの使用例に適応できるはずです。

このテクニックをデモンストレーションするスクリーンショットです。デモの目的でこのスクリーンショットでopacityが0.25に設定されています。あなたは0.001に設定した場合、あなたはselect

Screenshot of technique with opacity set higher for demo purposes

+0

不透明度の良い呼び出し。それがまさに私が必要としていたものです。 –