如何使用 javascript 檢測硬件鍵盤的存在？

Question

使用javascript檢測硬件鍵盤存在的最佳跨瀏覽器和跨平台方式是什么？

Answer 1

這可能是一個老問題，但幾個月前，我自己也在尋找解決方案。 我正在構建一個消息傳遞系統，當有人在他們的物理鍵盤上點擊Return時應該發送消息，但是當有人在虛擬鍵盤上點擊Return時插入一個換行符。 我解決它的方法是通過計算keydown和keyup事件之間的時間並獲得Return被擊中時的平均值。

我終於可以記錄它在我的博客 在這里。

Answer 2

你能嘗試相反的理論嗎？ 與其嘗試檢測鍵盤硬件，不如嘗試檢測觸摸屏？ 使用ontouchstart事件；

if ('ontouchstart' in document.documentElement) {
    // show icon
}

Answer 3

JS 中的鍵盤可以通過瀏覽器 API 訪問，這些 API 委托給 OS API，並且無法判斷是否有物理鍵盤。 我現在可以切斷物理鍵盤的電源線，打開虛擬鍵盤，用鼠標單擊屏幕上的按鈕，瀏覽器仍會觸發腳本正在偵聽的每個鍵盤事件。 從瀏覽器/JS 的角度來看，虛擬鍵盤與物理鍵盤無法區分。

“在場”甚至是什么意思？ 如果我有一部帶有觸摸屏和滑出式鍵盤的手機，您是否希望瀏覽器觸發某種“keboardIn”/“keyboardOut”事件？ 與電纜插入/輸出相同嗎？ :)

如果您的應用絕對需要物理鍵盤，只需通知/詢問用戶即可。

編輯 - 由 OP 澄清后：

你知道臉書聊天嗎？ 您只需按“Enter”即可發送消息，我必須向沒有鍵盤按鈕的用戶顯示替換“Enter”鍵。

所以只需制作一個帶有文本輸入的表單並監聽輸入/表單事件。 大多數（每個？）軟鍵盤都有某種“完成”、“准備”或類似的按鈕。 您不需要知道“keyCode”是否等於“13”，但要檢測用戶是否有意提交他輸入的內容。 或者，作為最后的手段，檢測我啟用了觸摸功能的設備，然后顯示按鈕。 ( if('ontouchstart' in document.documentElement)/* show touch sbmit button */ )

Answer 4

使用鍵盤事件來檢測用戶是否有鍵盤（他/她可以按下它）。 保存在localStorage中，下次瀏覽器會記住它。

var app = this;
app.hasKeyboard = false;
this.keyboardPress = function() {
    app.hasKeyboard = true;
    $(window).unbind("keyup", app.keyboardPress);
    localStorage.hasKeyboard = true;
    console.log("has keyboard!")
}
$(window).on("keyup", app.keyboardPress)
if(localStorage.hasKeyboard) {
    app.hasKeyboard = true;
    $(window).unbind("keyup", app.keyboardPress);
    console.log("has keyboard from localStorage")
}

Answer 5

當移動設備的屏幕上彈出虛擬鍵盤時，應用程序的高度會降低以容納虛擬鍵盤。 因此，您可以做的是添加一個事件偵聽器，以檢查當用戶關注輸入字段時屏幕是否已調整大小。

當輸入字段聚焦時，您可以使用調整大小事件偵聽器添加此功能：

const inputField = document.querySelector(".my-input");

const virtualKeyboardDetected = () => alert("Virtual keyboard detected!");

inputField.addEventListener("focusin", () => {
    window.addEventListener("resize", virtualKeyboardDetected )
})
inputField.addEventListener("focusin", () => {
    window.removeEventListener("resize", virtualKeyboardDetected )
})

Answer 6

if (confirm('Do you have hardware keyboard?')) {

} else {

}

根據問題下評論中的描述進行編輯：

每次都支持“輸入”並為觸摸屏添加“發送”圖標（ 使用 JavaScript 檢測“觸摸屏”設備的最佳方法是什么？ ）以及作為鼠標的“懸停”偽類如何？