Có một cú nhấp chuột ở bất kỳ đâu trên trang web, mở một menu thả xuống chọn

Question

Tôi đang xây dựng trang web sẽ được xem trên thiết bị di động (đặc biệt là Blackberry). Tôi có menu thả xuống của các loại được triển khai dưới dạng < chọn > ở góc trên bên trái của trang. Thay vì yêu cầu người dùng nhấp vào trình đơn thả xuống trực tiếp tôi muốn có để người dùng có thể nhấp/nhấn vào bất kỳ đâu trên trang, lựa chọn thả xuống ở góc trên bên trái sẽ mở ra. Trang không có liên kết hoặc đối tượng có thể nhấp nào khác ngoài menu thả xuống ở phía trên bên trái.

Điều này có thể thực hiện được không? Từ những gì tôi đã tìm thấy cho đến nay có vẻ như nó là không thể lập trình mở một thả xuống <select>, nhưng tôi figured tôi ném trường hợp cụ thể này ra khỏi đó.

Answer 1

Vì không thể bấm phím giả mạo với JavaScript (và vì lý do bảo mật), điều gần nhất là thay đổi kích thước của phần tử <select> (thay đổi từ điều khiển thả xuống để điều khiển hộp danh sách và quay lại).

Demo, Code (tinh khiết JS, không có thư viện)

Khi người sử dụng chọn một tùy chọn bằng cách nhấp chuột (hoặc gõ) nó, bấm vào xử lý sự kiện 'đóng cửa' các danh sách hộp bằng cách thiết lập kích thước của nó trở lại 1, sau đó nó chuyển đổi trở lại một điều khiển thả xuống bình thường. Tôi đã chỉ thử nghiệm điều này trong (không phải di động) Chrome, cho tôi biết nếu nó hoạt động trên Blackberry hay không.

Edit:

Tôi đã tạo ra một plugin jQuery nhỏ mà kết thúc tốt đẹp hành vi và cấu hình vào một điều khiển dễ hiểu hơn. Tôi đã thử nghiệm điều này trên Safari Mobile trên iOS 4 và nó hoạt động giống như một trình đơn thả xuống thường xuyên trong trình duyệt đó, ngoại trừ nó có thể được mở theo chương trình.

Demo, Code (jQuery 1.7)

Nó hoạt động như thế này:

$("select").openable({ triggers: $("#trigger") }); 

Nhấp vào bất kỳ kích hoạt sẽ mở ra giao diện người dùng lựa chọn.

Tôi cũng đã thêm một handler cho chìa khóa lên sự kiện để bắt Nhập, Esc và Space để 'gần' hộp danh sách. Điều này bắt chước cơ chế lựa chọn của trình điều khiển thả xuống trên các trình duyệt máy tính để bàn.

Tất nhiên, trên trình duyệt dành cho máy tính để bàn, thao tác này sẽ thay đổi bố cục của trang của bạn, vì nó khác với điều khiển thả xuống gốc. Bạn sẽ phải đưa ra một giải pháp CSS cho điều đó (một cái gì đó với position: absolute và z-index có thể). Nhưng trên iOS giao diện người dùng lựa chọn không được hiển thị trên trang, do đó, nó không phải là một vấn đề.

Một lần nữa, đã không kiểm tra plugin này trên BlackBerry ...