Apple 在2019年6月的 WWDC 開發者大會發佈了 iPadOS 和 iOS 13 的預覽版,所謂的 iPadOS 就是把 iPad 的 iOS 作業系統另外獨立出來,一國兩制….有點敏感。總之以後蘋果手機跟平版的作業系統會有不同的名字,不同的功能宣傳頁面。

這些酷炫的 iPadOS 新功能,想起從前有支令我印象深刻的 Apple 廣告,一個有錢的小孩帶著 iPad Pro 和 Apple Pencil 四處奔波學習、體驗生活,過了豐富的一天,然後回家時鄰居問他「嘿?你用電腦做了什麼?」

小孩回答:「什麼是電腦?(What’s a Computer?)」廣告就到此結束。

啊嘶,聽到這句好像被電到一樣,不管那台機器是叫電腦、平板,還是叫免洗員工,能達成任務的就是好工具。雖然現實中的許多用途,在 iPad 上操作起來並沒有這麼美好,但看得出蘋果想把 iPad 作為生產力工具這件事上面,做了不少努力。

有一個功能引起我的注意,iPad 竟然可以接滑鼠了!

難道 CSS 的 hover,跟那些滑鼠移動相關的 JS 游標偵聽事件,該不會在 iPad 上又能用了吧?

先講結論,2019/9 更新的 iPadOS/iOS 13.0 還不行,但是 2020/3 月底更新的 iPadOS 13.4/iOS 13.4,只要 iPad/iOS 接上滑鼠/巧控鍵盤/巧控板,那些滑鼠移入、CSS hover 就又復活了。

iPad 接滑鼠不是新招,很久很久以前外部廠商有做一個叫 BTC Mouse & Trackpad 的產品,可以做到類似的事,但首先裝置要先越獄,再花錢另購軟體,而且只支援比較舊的 iOS 系統,新系統都不支援,也沒人再繼續研究。現在蘋果官方直接把這功能送給大家了。

本文使用以下測試設備:
– iPad 2018 (iPadOS 13 beta)
– iPhoneX (iOS13 beta 7)
– 其他 iOS11 或 12 的平板和手機
– 羅技無線藍牙滑鼠 M590

羅技無線藍牙滑鼠 M590

M590 這支藍牙滑鼠的特色是:
* 按鍵和滾輪都很安靜,最高品質靜悄悄,蹲最低的跳最高(?)
* 有羅技Flow多工模式,可以方便的在兩個裝置間切換,而且 Windows, Mac, iOS, Android 作業系統都支援。很多品牌都做有側鍵的滑鼠,但是能支援 Windows 以外平台的,驅動程式跟軟體能在最新版本的作業系統上使用的,幾乎只有羅技了。
* Unifying 接收器,不同套的羅技無線鍵盤跟無線滑鼠,可以共用一個接收器,不用佔掉一堆 USB 孔。

裝置的設定中可以發現兩件事
1.連接滑鼠的設定藏在「輔助觸控」裡面,第二層的指向裝置裡面多了一個「裝置」的選項,這個選擇裝置在 iOS12 以下是沒有的。即使在 iOS12 的藍牙裝置裡面有看到藍牙滑鼠,也無法成功配對。
2.連接滑鼠似乎不是主打功能,比較像是給一些手不方便的使用者用的。但在 iOS 13/ iPadOS 中,輔助使用已經提升到一般是同一層的,而不是像 iOS12 以前的版本,輔助使用是歸類在「一般」的子層裡面。

不只是 iPad 可以接藍牙滑鼠,連 iPhone 也可以接藍牙滑鼠, iOS13 與 iPadOS 在這部分的設定方式是一樣的。

但是在 iPad 跟 iPhone 使用滑鼠沒有想像中的「像電腦一樣」,游標不是箭頭,而是一個可以自定顏色和大小的圓點,滾輪移動方向比較接近 MacOS 的自然捲動(跟 Windows 的捲動方向相反),比較後期的 beta 版本可以在滑鼠模式時把小白點隱藏。其餘的可以參考本文末別人寫的使用心得。我只是要知道,網頁的游標偵聽事件是不是在 iPad 上復辟了?

做了一個簡易的測試網頁 Mouse event test ,只要能觸發的,數字就會+1,實測發現…

這些是可以用的,其實還是跟一般的觸控螢幕裝置一模一樣…

  • mouseup
  • mousedown
  • click
  • touchstart
  • touchend

這些是不能用的

  • dblclick(連點兩下,在部分 Android 手機或 iPhone 快速點兩下可觸發,但也有些較舊的裝置卻只會把螢幕放大,而不會觸發執行 JS 程式碼)
  • contextmenu(右鍵選單,在部分 Android 手機或 iPhone 長壓螢幕可觸發,但有些裝置卻只會變成選取文字的模式,而不會觸發執行 JS 程式碼)
  • mouseout
  • mouseover
  • mousemove
  • mouseenter
  • jQuery 的 hover
  • CSS 的 hover
  • HTML title Attribute

結論

接上滑鼠的 iPad 會影響到觸控裝置上的網頁互動介面設計嗎?目前看起來是沒有甚麼差異。
真要說的話:
– 用滑鼠操作平板時,手指或手掌不會再擋住畫面/光線感應器。
– 某些使用情境的網頁程式,操作時需要有觸控螢幕,但也要能接滑鼠,情況單純的可以改用 iPad,而不是用一些貴桑桑的特規觸控機器/All-In-One PC 之類的。

所以目前應該暫時不用擔心要在 iPad 上做出「滑鼠游標上跟著一段促銷文字」「公仔的眼睛跟著滑鼠游標移動」「鎖滑鼠右鍵」這些東西。

至於 Android 陣營呢?接滑鼠已經是老梗,3C賣場一個便宜的OTP接頭就讓各種 Android 手機平版接上有線滑鼠了,更別提許多遊戲玩家都在電腦上用Android模擬器玩遊戲。本文使用的藍牙滑鼠也能連接 Android 手機,而且還會出現跟電腦上一樣的箭頭游標,但似乎沒有任何人在意滑鼠是否會改變 Android 觸控裝置的軟體介面這檔子事。

延伸閱讀

2020/3/20 更新:推翻結論,iPadOS 13.4 接滑鼠後,可支援 CSS hover, jQuery Hover 等等滑鼠移入事件

這篇文章發表後的半年多,2020/3/19 蘋果官網發布了新產品,iPad Pro 和巧控鍵盤,巧控鍵盤的特色就是上面有個觸控板,看了宣傳操作影片覺得不妙,馬上把手邊的平板更新了 iPadOS 13.4 beta,再把 iPad 接上滑鼠,一測之下發現大師兄們都回來了…

實測 IPadOS + 滑鼠,整個系統介面滿滿的「滑鼠移過」效果,現在沒效的只剩 html 的 title 屬性,滑鼠移上去仍然不會浮出小文字視窗,其他什麼 mouseenter, css hover, jQuery hover, contextmenu, mouseout, mousemove, mouseover 通通都是會執行的。

iPadOS 13.4 和 iOS 13.4 正式版出了之後再試一次,iPad 跟 iPhone 接上藍牙滑鼠,css hover 那些真的都復活了。而且不只是滑鼠,實測接 Magic Trackpad 2 (Mac桌機用的藍牙無線觸控板)在 iPadOS 13.4 和 iOS 13.4 也是能用的,蘋果竟然重新定義了游標。

觸控裝置支援滑鼠移入功能,有可能會發生什麼事呢?
1.如果有一個古老非常舊,但大家不得不用的網站,底下還寫著最佳瀏覽解析度1024*768,網頁選單都是「滑鼠移入時展開」,網頁上的按鈕間距很難用手指觸控操作,遇到一個使用者使用 iPadOS 13.4 的 iPad,使用者不用去借桌電,網站也不需要特別針對觸控裝置去改版,使用者只要接上滑鼠/巧控鍵盤/Magic Trackpad,還是可以操作的。
2.例如工廠生產線或廚房放了一台 iPad ,讓操作者用來回報生產進度,可以不用怕髒手戳壞螢幕,只要買個幾百塊的藍牙滑鼠接上去就好了。
3.小朋友說 iPad 有很多網頁不能看,所以要買 MacBook?除非他是要用自然人憑證此類會用到讀卡機的操作,還是網頁裡有很多 Flash,還是有專業用途,還是要去拍照打卡裝潮,不然的話就買個滑鼠接上去就好了。