JavaScript na iOS: otwarcie elementu wyboru HTML

Question

Nie mam nadziei, ale zapytam na wszelki wypadek.

Chciałbym móc korzystać z JavaScript, aby otworzyć wybrany element w mobilnej przeglądarce Safari na iPhone'a/iPada.

Rozległe przeszukiwanie Google/stosu przepełnień pokazuje, że wiele osób chciałoby to zrobić w ogóle w przeglądarkach, ale nie jest obsługiwane (dlaczego nie, zastanawiam się?). Zaproponowano różne hacki, wywołując focus() na elemencie select i zmieniając jego właściwość size, aby uwidocznić więcej elementów option lub konstruując całkowicie fałszywy element zaznaczenia z elementami <div> i <ul>. Chciałbym jednak użyć natywnej kontroli wyboru przeglądarki na iPadzie i iPhonie.

Zastanawiam się, po prostu, może ktoś może znać zastrzeżoną metodę Apple WebKit, aby to zrobić. To byłoby coś takiego:

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

jako bonus, to byłoby również przydatny wiedzieć o właściwości Boolean, która mówi, czy select elementem jest obecnie otwarty/aktywny, czy nie (czyli nie tylko, czy element ma ostrość). Wiem, że mogę to rozwiązać, śledząc kliknięcia i zmieniając wydarzenia, ale przydatna byłaby prosta właściwość.

Pobożne życzenia?

---

UPDATE:
Jeszcze nie ma odpowiedzi, ale odkryłem, że symulowanie mousedown powodzeniem otwiera wybierz element w Google Chrome, ale nie iPad lub Firefox i tak dalej:

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:
Poprosiłem powiązany, ale inny (i podobnie bez odpowiedzi!) pytanie na wybranych polach tutaj: Is there a DOM event that fires when an HTML select element is closed?

Answer 1

Wywoływanie formantów HTML za pomocą JS to bardzo szary obszar, częściowo ze względów bezpieczeństwa, a częściowo z powodu braku wsparcia. Nawet przy użyciu frameworków takich jak jQuery, nie można po prostu połączyć się z nim w taki sam sposób, jak click(). Musisz wywołać zdarzenie typu natywnego kliknięcia na poziomie przeglądarki (wierzę, że robi to najnowsza wersja Selenium, ale to struktura testowa, która jest nieodpowiednia dla tego problemu). Gratulujemy osiągnięcia częściowego wyniku w Chrome! Jednak nie znajdziesz uniwersalnego rozwiązania, które używa rzeczywistych wejść wyboru.

Proponuję użyć innego rodzaju kontroli - pionowego stosu przycisków, jeśli chcesz go nacisnąć, aby aktywować funkcję, lub stosu przycisków radiowych popartych etykietami (z niewielkim CSS), jeśli chcesz format wielokrotnego wyboru.

Answer 2

Czy wypróbowałeś metodę change()?

Answer 3

Wybrany element musi być widoczny. Jeśli używasz jQuery można to zrobić w następujący sposób:

$('mySelectElementSelector').focus(); 

Na mobile pokaże domyślny wybór sterowania. Na pulpicie wystarczy skupić się na kontroli wyboru.

Answer 4

Mam działające rozwiązanie, które działa w najnowszych wersjach iOS i Androida. Nie testowałem jeszcze starszych wersji. Nie ma dwóch sposobów na to: to rozwiązanie jest hack. Ale działa, jeśli zostanie wdrożony ostrożnie.

W mojej sytuacji miałem iOS 7 jak przełączać element przełącznika. Chciałem, aby widok picker dla select był prezentowany, gdy przełącznik był włączony. W moim przypadku nie potrzebowaliśmy ani nie chcieliśmy, aby użytkownik zobaczył samo pole o wartości select. Chcieliśmy po prostu użyć ładnego interfejsu przeglądarki Scrolly.

Użyłem CSS do położenia i rozciągnięcia select całkowicie nad przełącznikiem. Następnie ustawiłem opacity w CSS na coś podobnego do opacity: .001;, co czyni go niewidocznym dla wszystkich intencji i celów. Może nadal działać z nieprzezroczystością 0, ale czułem, że pozostawiając trochę nieprzezroczystości, może być bezpieczniej i naprawdę nie możesz tego wszystkiego zobaczyć. Teraz, gdy użytkownik dotknie obszaru ekranu, który wyświetla przełącznik, zdarzenia zaczepów przechodzą do select, co powoduje wyświetlanie widoku próbnego.

Na razie onchange z select ja ustawiony display: none; całkowicie ukryć select. Oznacza to, że gdy użytkownik dotknie przełącznika, aby go wyłączyć, wchodzi w interakcje z samym przełącznikiem. Kiedy przełącznik zostanie wyłączony, ustawię display: block, aby przywrócić select do jego stanu aktywnego.

Mój przypadek użycia jest wąski, ale technika określania położenia/nieprzezroczystości powinna być dostosowywana do wielu przypadków użycia, chociaż w przypadku, gdy pole ma być widoczne, być może trzeba mieć 2 select elementów.

Oto zrzut ekranu pokazujący technikę. Na tym zrzucie ekranu opacity jest ustawione na 0.25 dla celów demonstracyjnych. Po ustawieniu go do 0.001 nie można zobaczyć select