多选＆LT;选择＆GT;在移动设备上盒 [英] Multi Select <select> box on mobile devices

问题描述

我有一个使用多选列表框使用CSS设置高度来填充其他列表的接口。

I have an interface which uses multi select listboxes with a css set height to populate other lists.

基本上是：

<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，基本上你选择第一个一些事情，并会将其移动到第二个。

Using jQuery, basically you select some things in the first one, and it moves them to the second one.

这个伟大的工程，和我们的用户喜欢它在非移动环境。但在Android平板电脑，手机，iPhone和iPad的名单看空，直到你点击它显示了内置的滚动选择界面。所以你看不到新的，当他们被添加到第二个列表。

This works great, and our users like it in non-mobile environments. BUT, on android tablets, phones, iphones and ipads, the lists look empty until you click and it shows the built in scrolling select interface. So you can't see the new ones when they are added to the second list.

这很简单的jsfiddle说明了什么我谈论的选择框没有显示它们的内容：

This very simple jsFiddle shows what I am talking about with the select boxes not showing their content:

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

有没有办法来覆盖此行为，而不必让自己的自定义的东西，也可以使用这样的移动设备的完全不同的方式？

Is there a way to override this behaviour without having to make my own custom thing, or use an entirely different way of doing this for mobile devices?

如果没有办法做到这一点，这将是实现这样即移动的东西的最佳方式友好吗？

If there isn't a way to do that, what would be the best way to implement something like that that is mobile friendly?

编辑：

下面是这个界面的外观基本画面，无论是在框中列出了可能非常长或短。但他们有一个设定高度，一致性：

Here is a basic picture of how this interface looks, the lists in either box could be very long or short. but they have a set height, for consistency:

编辑：
我无法想象我是谁遇到这种只有一个！有一定是一种方法，使移动浏览器的行为正常。

I can't imagine I'm the only one who's come across this! There has got to be a way to make the mobile browsers behave properly.

推荐答案

此行​​为的移动浏览器是设计，以改善用户体验。据<一个href=\"http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15\"相对=nofollow> Safari网页内容指南

This behavior in mobile browsers is by design to improve user experience . According to Safari Web Content Guide

如果您在使用选择HTML元素使用选择的元素
  网页，iOS设备会显示自定义选择控制是优化
  选择使用手指作为输入装置列表中的项目。上
  iOS版，用户可以轻弹滚动列表，然后点击选择项目
  从列表

Use the Select Element If you use the select HTML element in your webpage, iOS displays a custom select control that is optimized for selecting items in the list using a finger as the input device. On iOS, the user can flick to scroll the list and tap to select an item from the list.

这是说：

• 我建议你不打它，但利用它为移动用户着想


• 使用媒体查询申请不同的CSS为桌面和移动你的选择元素
  浏览器;



• 如果显示的选项数量是足够小，可以考虑使用＆LT;输入类型=复选框＆GT;

而不是选择，因为它的行为是跨浏览器一致的。

instead of select because it's behavior is consistent across browsers.

这篇关于多选＆LT;选择＆GT;在移动设备上盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！