JavaScript trên iOS: mở phần tử chọn HTML

Question

Tôi không hy vọng, nhưng tôi sẽ yêu cầu chỉ trong trường hợp.

Tôi muốn có thể sử dụng JavaScript để mở phần tử được chọn trong Safari trên thiết bị di động cho iPhone/iPad.

Tìm kiếm tràn Google/Stack mở rộng cho thấy rất nhiều người muốn có thể thực hiện điều này trong trình duyệt nói chung, nhưng không được hỗ trợ (tại sao không, tôi tự hỏi?). Nhiều gợi ý khác nhau đã được đề xuất, từ việc gọi focus() trên phần tử chọn và thay đổi thuộc tính size để hiển thị thêm các thành phần option hoặc xây dựng phần tử chọn hoàn toàn với các yếu tố <div> và <ul>. Tuy nhiên, tôi muốn sử dụng trình điều khiển gốc chọn các điều khiển trong iPad và iPhone.

Tôi tự hỏi, chỉ có thể, ai đó có thể biết về phương thức Apple WebKit độc quyền để thực hiện việc này. Nó sẽ là một cái gì đó như:

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

Như một phần thưởng, nó cũng muốn được tiện dụng để biết của một thuộc tính boolean nói rằng cho dù các yếu tố lựa chọn hiện nay là mở/hoạt động, hay không (tức là không chỉ xem phần tử đã tập trung). Tôi biết tôi có thể làm việc này bằng cách theo dõi nhấp chuột và thay đổi sự kiện, nhưng một thuộc tính đơn giản sẽ hữu ích.

Suy nghĩ mơ ước?

---

UPDATE:
tôi vẫn chưa có câu trả lời, nhưng tôi đã phát hiện ra rằng mô phỏng một mousedown mở thành công một yếu tố lựa chọn trong Google Chrome, nhưng không phải iPad hoặc Firefox và vân vân:

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:
tôi đã hỏi một câu hỏi liên quan, nhưng khác nhau (và được trả lời tương tự!) trên một số hộp ở đây: Is there a DOM event that fires when an HTML select element is closed?

Answer 1

Kích hoạt kiểm soát HTML với JS là một khu vực rất xám, một phần vì lý do bảo mật và một phần do thiếu sự hỗ trợ. Ngay cả khi sử dụng các khung công tác như jQuery, bạn không thể chỉ đơn giản là click() một liên kết để theo dõi nó theo cách giống như click() trên một nút - bạn cần kích hoạt sự kiện nhấp chuột gốc ở cấp trình duyệt (tôi tin phiên bản mới nhất của Selenium một khuôn khổ thử nghiệm để không phù hợp với vấn đề này). Chúc mừng bạn đã có thể đạt được một phần kết quả trong Chrome! Tuy nhiên, bạn sẽ không tìm thấy một giải pháp phổ quát sử dụng các đầu vào được chọn thực.

Tôi khuyên bạn nên sử dụng một loại điều khiển khác - một chồng các nút dọc nếu bạn muốn nhấn một nút để kích hoạt đối tượng địa lý hoặc một nút radio được hỗ trợ bởi nhãn (với một chút CSS) nếu bạn muốn định dạng đa lựa chọn.

Answer 2

Bạn đã thử phương pháp change() chưa?

Answer 3

Phần tử chọn cần được hiển thị. Nếu bạn sử dụng jQuery, bạn có thể thực hiện như sau:

$('mySelectElementSelector').focus(); 

Trên thiết bị di động, nó sẽ hiển thị điều khiển chọn mặc định. Trên máy tính để bàn chỉ tập trung vào điều khiển chọn.

Answer 4

Tôi có giải pháp hoạt động cho tính năng này hoạt động trên các phiên bản iOS và Android gần đây. Tôi chưa thử nghiệm trên các phiên bản cũ hơn. Không có hai cách về nó: giải pháp này là một hack. Nhưng nó hoạt động nếu được thực hiện một cách cẩn thận.

Trong trường hợp của tôi, tôi đã có iOS 7 như phần tử chuyển đổi chuyển đổi. Tôi muốn chế độ xem bộ chọn cho số select được hiển thị khi công tắc được bật. Trong trường hợp của tôi, chúng tôi không cần hoặc muốn người dùng tự nhìn thấy trường select. Chúng tôi chỉ đơn thuần muốn sử dụng giao diện chọn lọc tuyệt vời của iOS.

Tôi đã sử dụng CSS để định vị và kéo dài select hoàn toàn qua nút gạt. Sau đó tôi đặt opacity trong CSS thành một cái gì đó như opacity: .001; làm cho nó vô hình cho tất cả các ý định và mục đích. Nó vẫn có thể làm việc với opacity 0 nhưng tôi cảm thấy để lại một chút opacity có thể an toàn hơn và bạn thực sự không thể nhìn thấy tất cả anyway. Bây giờ khi người dùng chạm vào khu vực của màn hình hiển thị công tắc, các sự kiện nhấn sẽ thực sự chuyển sang chế độ xem select làm cho màn hình bộ chọn hiển thị.

Trên sự kiện onchange của select Tôi đặt display: none; để ẩn hoàn toàn select. Điều này có nghĩa là khi người dùng chạm vào công tắc để tắt, họ đang tương tác với chính công tắc. Khi công tắc được tắt, tôi đặt display: block để trả lại trạng thái hoạt động select.

Trường hợp sử dụng của tôi hẹp nhưng kỹ thuật vị trí/độ mờ nên thích ứng với nhiều trường hợp sử dụng mặc dù bạn có thể phải có 2 select yếu tố trong trường hợp bạn muốn trường hiển thị.

Đây là ảnh chụp màn hình giới thiệu kỹ thuật. opacity được đặt thành 0,25 trong ảnh chụp màn hình này cho mục đích demo. Khi bạn đặt nó là 0,001 bạn không thể nhìn thấy select