如何使用 javascript 检测硬件键盘的存在？

Question

使用 javascript 检测硬件键盘存在的最佳跨浏览器和跨平台方法是什么？

Answer 1

这可能是一个老问题，但几个月前，我自己也在寻找解决方案。我正在构建一个消息传递系统，当有人在物理键盘上点击Return 时应该发送消息，但是当有人在虚拟键盘上点击Return 时插入换行符。我解决它的方法是计算keydown 和keyup 事件之间的时间，并获得Return 被击中的平均值。

我终于有时间在我的博客 here 上记录它。

Answer 2

你能尝试理论上相反的吗？与其尝试检测键盘硬件，不如尝试检测触摸屏？通过ontouchstart 事件；

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

Answer 3

JS 中的键盘可以通过委托给 OS API 的浏览器 API 访问，并且无法判断是否有物理键盘。我现在可以切断物理键盘的电源线，打开虚拟键盘，用鼠标单击屏幕上的按钮，浏览器仍然会触发脚本正在侦听的每个键盘事件。从浏览器/JS 的角度来看，虚拟键盘与物理键盘没有区别。

“存在”到底是什么意思？如果我有一部带有触摸屏和滑出式键盘的手机，您是否希望浏览器触发某种“keboardIn”/“keyboardOut”事件？与电缆插入/输出相同吗？ :)

如果您的应用绝对需要物理键盘，只需通知/询问用户即可。

编辑 - 在 OP 澄清后：

你知道 Facebook 聊天吗？您只需按一下即可发送消息 “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("focusout", () => {
    window.removeEventListener("resize", virtualKeyboardDetected )
})

Answer 6

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

} else {

}

根据问题的cmets中的描述进行编辑：

如果每次都支持“输入”并为触摸屏添加“发送”图标 (What's the best way to detect a 'touch screen' device using JavaScript?) 并作为鼠标的“悬停”伪类，怎么样？