如何使用 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 检测“触摸屏”设备的最佳方法是什么？ ）以及作为鼠标的“悬停”伪类如何？