26

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

4

6 回答 6

14

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

我终于开始在我的博客上记录它了。

于 2016-02-13T03:22:42.437 回答
10

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

if ('ontouchstart' in document.documentElement) {
    // show icon
}
于 2013-09-18T19:44:18.707 回答
4

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

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

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

编辑 - OP澄清后：

你知道脸书聊天吗？您只需按“Enter”即可发送消息，我必须向没有键盘按钮的用户展示替换“Enter”键。

所以只需制作一个带有文本输入的表单并收听输入/表单事件。大多数（每个？）软键盘都有某种“完成”、“就绪”或类似的按钮。您不需要知道“keyCode”是否等于“13”，但可以检测到用户有提交他键入的内容的意图。或者，作为最后的手段，检测我启用触摸的设备，然后显示按钮。( if('ontouchstart' in document.documentElement)/* show touch sbmit button */)

于 2013-09-18T19:25:00.760 回答
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")
}
于 2017-03-10T21:46:44.190 回答
2

当移动设备的屏幕上弹出虚拟键盘时，应用程序的高度会减小以适应虚拟键盘。因此，您可以做的是添加一个事件侦听器，以检查屏幕是否在用户关注输入字段时调整了大小。

当输入字段获得焦点时，您可以使用 resize 事件侦听器添加此功能：

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 )
})
于 2021-10-28T16:28:12.980 回答
-7 
if (confirm('Do you have hardware keyboard?')) {

} else {

}

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

每次都支持“输入”并仅为触摸屏添加“发送”图标（使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？）以及作为鼠标的“悬停”伪类怎么样？

于 2013-09-18T19:06:01.250 回答