Подтвердить что ты не робот

<select> с атрибутом размера: iPhone отображает пустой

При отображении раскрывающегося списка выбора, как показано ниже, iPhone делает его пустым. Как я могу это исправить?

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Вышеприведенный пример из http://www.w3schools.com/tags/att_select_size.asp. Их образец http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

В Firefox (и всех других браузерах) он отображается как:

Firefox example rendered select dropdown

Однако на iPhone он был пустым. Это очень плохо для удобства использования, поскольку посетитель не знает, что в коробке (в нашем приложении он выбирает свой адрес из нескольких возможностей).

iPhone example rendering

Я создал JSFiddle: http://jsfiddle.net/bqMEv/3/ Отправка iPhone выглядит следующим образом; обратите внимание, что ничего не отображается, когда оба:

  • размер больше 1
  • и высота указана в CSS
  • и не выбрана опция

Rendering from JSFiddle

Удаление высоты CSS показывает, что iPhone игнорирует атрибут размера.

Removing CSS height

4b9b3361

ОТВЕТЫ

Ответ 1

Похоже, что нет стандартного способа сделать это, основываясь на содержании других тем при переполнении стека:

Но автор второй темы написал плагин, который эмулирует это поведение: https://github.com/redhotsly/safarimobile-multiline-select

Ответ 2

Если вам нужно отобразить один из параметров, используйте следующее: выбранный HTML-атрибут

enter image description here

Ваша веб-страница в firefox:

enter image description here

Ответ 3

Мое простое исправление для этого, используя JQuery:

$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
$('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>');
}
});

Работает следующим образом:

  • Дождитесь загрузки документа

  • Если пользователь посещает сайт с помощью iPhone, iPod или iPad, выполните script

  • Добавьте выбранный и отключенный вариант в верхней части списка выбора, с текстом Msgstr "Пожалуйста, выберите что-нибудь".

Не работает во всех других браузерах, отлично работает: D

Ответ 4

Похоже, что здесь люди не могут полностью понять проблему. Проблема заключается в том, что браузер iOS не будет отображать метку для невыбираемого первого поля, которое обычно будет индикатором типа "Пожалуйста, выберите...". Если он не выбран, iOS отображает его как пустую. Это нежелательно, потому что есть выбор для пользователя, но поле отображается как пустое.

Вы также не можете установить его программно выбранным, чтобы отобразить "Пожалуйста, выберите", потому что, если это поле необходимо, проверка формы больше не работает, поскольку браузер рассматривает первое выбранное поле, даже если оно помечено как неактивна.

"Ошибка" заключается в том, что браузер iOS не отображает метку для первого поля, когда он установлен как невыбираемый.