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

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

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

Широкий поиск Google/Qaru показывает, что многие люди хотели бы сделать это в браузерах в целом, но он не поддерживается (почему бы и нет, интересно?). Были предложены различные взломы, вызвав 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?

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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

$('mySelectElementSelector').focus();

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

Ответ 4

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