web-dev-qa-db-ja.com

モバイルデバイスの複数選択<select>ボックス

私は、CSSセットの高さを持つ複数選択リストボックスを使用して他のリストにデータを入力するインターフェイスを持っています。

基本的に：

<select multiple="multiple" size="5" style="height:150px;">
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>    

</select>

<select multiple="multiple" style="height:150px;"></select>

JQueryを使用して、基本的に最初のもののいくつかを選択し、それを2番目のものに移動します。

これはうまく機能し、ユーザーはモバイル以外の環境でこの機能を気に入っています。しかし、Androidタブレット、携帯電話、iPhone、iPadの場合、クリックするまでリストは空になり、組み込みのスクロール選択インターフェースが表示されます。そのため、新しいものは表示されません。 2番目のリストに追加されました。

この非常に単純なjsFiddleは、選択ボックスがコンテンツを表示していない状態で私が話していることを示しています。

http://jsfiddle.net/VhXwA/2/

独自のカスタムのものを作成したり、モバイルデバイスでこれを行うためにまったく異なる方法を使用したりすることなく、この動作をオーバーライドする方法はありますか？

それを行う方法がない場合、そのようなモバイル対応の何かを実装するための最良の方法は何でしょうか？

編集：

以下は、このインターフェースがどのように見えるかの基本的な画像です。どちらかのボックスのリストは非常に長い場合と短い場合があります。ただし、一貫性のために高さが設定されています。 Example

編集：私がこれに遭遇した唯一の人だとは想像できません！モバイルブラウザを適切に動作させる方法が必要です。

androidhtmlmobileuser-interfacehtml-select
16
Patricia

モバイルブラウザでのこの動作は、ユーザーエクスペリエンスを向上させるための仕様です。 Safari Webコンテンツガイド によると

Select要素を使用するWebページでselect HTML要素を使用する場合、iOSはカスタム選択コントロールを表示します。これは、入力デバイスとしての指。 iOSでは、ユーザーはフリックしてリストをスクロールし、タップしてリストから項目を選択できます。

これは言われています：

  • 私はそれと戦うのではなく、モバイルユーザーのためにそれを活用することをお勧めします
  • メディアクエリを使用して、デスクトップブラウザーとモバイルブラウザーのselect要素に異なるcssを適用します。

  • 表示されるオプションの数が十分に少ない場合は、<input type="checkbox">の使用を検討してください

    selectではなく、ブラウザ間で動作が一貫しているためです。

4
peterm

私は同様のインターフェイスを使用しており、デスクトップユーザーには効果的ですが、複数選択が複数行のスクロール可能なリストとして表示されないタッチデバイスでは完全に直感的ではありません。

完全にカスタムのコントロールが必要なようですが、この機能を実装しているように見えるJQueryコントロールが2つ見つかりました（ただし、方法は少し異なります）。

Eric Hynds Jquery UI multiselect： http://www.erichynds.com/blog/jquery-ui-multiselect-widget

準Partikelsソート可能な検索可能な複数選択ウィジェット： http://quasipartikel.at/multiselect/

これらはどちらも電話サイズのデバイスでは少し手間がかかりますが、特にアイテムの左側に小さな「+」を使用して追加するQuasi Partikelバージョンですが、Eric Hyndsではアイテム全体をタップして選択/選択解除できます。どちらかは、モバイル固有のスタイルで改善して、私が想定する重要な要素のサイズを増やすことができます。

2
Mark

私が理解していることから、最初にこれを選択しなかった理由がない限り、選択したオプションによっては別のページにリダイレクトする方がはるかに簡単だと思います。

チェックボックスのドロップダウンリストを使用できない理由がわかりません。これらはほぼすべてのスマートフォンで互換性があります。

<select name="Dropdown1">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
<option value="o4">Option 4</option>
</select>

または

<input type="checkbox" name="checkbox" value="o1">Option 1<br>
<input type="checkbox" name="checkbox" value="o2">Option 2

（ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2 および http://www.w3schools.com/html/html_forms.asp ）

0
bazite