2015-04-14 19 views
46

我正在通過Chrome的移動仿真工具調試我們網站的移動版本,但無法弄清楚如何在選擇文本字段時彈出屏幕上的鍵盤。谷歌Chrome移動模擬器:如何在屏幕鍵盤上顯示

我點擊了文本框,但沒有彈出鍵盤。如果我在移動設備上執行此操作,則會彈出默認輸入法(鍵盤)並允許我鍵入。

有沒有辦法複製這個?

+2

你有沒有想過這個? –

回答

66

最新的Chrome開發者工具,增加了對模擬不同的設備狀態支持:

  • 默認瀏覽器UI
  • 有了Chrome導航欄
  • 隨着打開鍵盤

按照documentation,此功能僅在模擬「支持的設備(如Nexus 5X」)時可用。

支持此功能的仿真設備的完整列表可在Chromium source-code找到。目前,它僅支持:

  • 的Nexus 5
  • 的Nexus 5X

注意,模擬鍵盤和導航欄都只是靜態圖片(你可以在source-code directory見)和唐不包含任何交互行爲。這是模擬屏幕大小的好方法,但它不是一個完美的模擬。

Screenshot of Chrome Developer Tools

+0

這個工作幾乎完美。鍵盤不使用我的光標位置,而是默認使用網頁的導航欄,但頁面的壓縮效果不錯。 - 謝謝 –

+12

請注意,這仍然不能模擬鍵盤的行爲(在選擇輸入時不提供鍵盤,不會調整滾動位置)。 – dlsso

+0

請注意,如果輸入類型設置爲「數字」,它將不會選擇數字鍵盤。 – Guy

11

我來使用從虛擬鍵盤擴展最接近的:「鉻虛擬鍵盤」

注:我不得不將它設置爲使用使用Sencha Touch應用程序時觸摸事件我正在處理。

還有一些其他的只是在鉻擴展區域搜索「虛擬鍵盤」,並選擇你喜歡的。

+0

作品!不完全相同的默認鍵盤,但看起來不錯。謝謝! –

+0

這現在是一個死鏈接,這是一個很大的恥辱。正是我需要的! Grr argh。 – JPollock

+0

這個問題已經足夠接近了:http://stackoverflow.com/questions/38386215/how-to-bring-up-mobile-keyboard-in-chrome-dev-tools?rq=1 – JPollock