JavaScript на iOS: открытие элемента выбора HTML

Question

Я не надеюсь, но я спрошу на всякий случай.

Я бы хотел использовать JavaScript для открытия элемента select в мобильном Safari для iPhone / iPad.

Обширный поиск в Google / Stack Overflow показывает, что многие люди хотели бы иметь возможность делать это в браузерах в целом, но это не поддерживается (почему бы и нет, интересно?). Были предложены различные способы взлома: от вызова focus() элемента select и изменения его свойства size, чтобы сделать видимыми больше элементов option, или создания полностью фиктивного элемента select с элементами <div> и <ul>. Однако я хотел бы использовать встроенные элементы управления браузером в iPad и iPhone.

Я подумал, может быть, кто-то знает о собственном методе Apple WebKit для этого. Это было бы что-то вроде:

var myselect = document.getElementsByTagName("select")[0];
myselect.open(); // this method doesn't exist

В качестве бонуса было бы также полезно узнать логическое свойство, которое сообщает, открыт ли / активен элемент выбора в настоящее время или нет (т. Е. Не только имеет ли элемент фокус). Я знаю, что могу решить эту проблему, отслеживая события нажатия и изменения, но было бы полезно простое свойство.

Желаемое за действительное?

---

UPDATE:
У меня пока нет ответа, но я обнаружил, что имитация mousedown успешно открывает элемент выбора в Google Chrome, но не 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:
Я задал связанный, но другой (и так же оставшийся без ответа!) Вопрос о полях выбора здесь: Есть ли событие DOM, которое срабатывает, когда закрывается HTML-элемент выбора?

Answer 1

У меня есть рабочее решение для этого, которое работает на последних версиях iOS и Android. Я еще не тестировал на старых версиях. Здесь нет двух способов: это решение взломать. Но это работает, если реализовано тщательно.

В моей ситуации у меня была iOS 7 как элемент тумблера. Я хотел, чтобы представление выбора для select было представлено при включении переключателя. В моем случае мы не нуждались или не хотели, чтобы пользователь сам видел поле select. Мы просто хотели использовать симпатичный интерфейс скроллера для iOS.

Я использовал CSS, чтобы расположить и полностью растянуть select над переключателем. Затем я устанавливаю opacity в CSS на что-то вроде opacity: .001;, что делает его невидимым для всех целей и задач. Он все еще может работать с непрозрачностью 0, но я чувствовал, что оставить немного непрозрачности там может быть безопаснее, и вы все равно не сможете увидеть все это. Теперь, когда пользователь касается области экрана, на которой отображается переключатель, события касания фактически переходят в select, что приводит к отображению представления средства выбора.

В событии onchange select я установил display: none;, чтобы полностью скрыть select. Это означает, что когда пользователь касается выключателя, он взаимодействует с самим выключателем. Когда переключатель выключен, я устанавливаю display: block, чтобы вернуть select в его активное состояние.

Мой вариант использования узкий, но метод позиционирования / непрозрачности должен быть адаптирован ко многим случаям использования, хотя вам может понадобиться 2 select элементов в тех случаях, когда вы хотите, чтобы поле было видимым.

Вот скриншот, демонстрирующий технику. opacity установлено на 0,25 на этом скриншоте для демонстрационных целей. Когда вы установите его на 0,001, вы не увидите select

Answer 2

Запуск элементов управления HTML с помощью JS является очень серой областью, частично из-за соображений безопасности, а частично из-за отсутствия поддержки. Даже используя такие фреймворки, как jQuery, вы не можете просто click() ссылку перейти по ней так же, как click() на кнопке - вам нужно вызвать собственное событие нажатия на уровне браузера (я полагаю, что последняя версия Selenium делает это, но это среда тестирования, которая не подходит для этой проблемы). Поздравляю с возможностью достижения частичного результата в Chrome! Тем не менее, вы не найдете универсального решения, которое использует реальные входные данные.

Я бы предложил использовать другой тип элемента управления - либо вертикальный стек кнопок, если вы хотите нажать одну из них, чтобы активировать функцию, либо стек радиокнопок, подкрепленных метками (с небольшим количеством CSS), если вы хотите мульти Выбор формата.

Answer 3

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

$('mySelectElementSelector').focus();

На мобильном устройстве будет отображаться элемент управления по умолчанию. На рабочем столе просто сфокусируйтесь на выбранном элементе управления.

Answer 4

Вы пробовали метод change()?