如何将带有快捷键的浮动框按钮添加到功能键F7？

Question

我们有带键盘和功能键的老式PDA机器，我们有一个用经典的ASP、jquery和javascript制作的web应用程序。打开web应用后，用户需要按下F7功能，添加一条扫描条码的记录。

现在旧的PDA机器已经死了，我们正在购买android PDA。新机器没有键盘，只有触摸屏。我们尝试添加一个键盘，但屏幕上没有太多空间来查看页面内容，这对用户来说有点繁琐。

有没有什么方法可以让我们在页面上添加一个浮动按钮，然后按下它，它就会模拟F7按下的功能？

提前谢谢。

Answer 1

下面的脚本创建一个button元素，当单击该元素时，将启动模拟F7按键的clickF7函数。

​

function clickF7() {
  document.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'f7' }))
}

const button = document.createElement('button')
button.innerHTML = 'click f7'
document.body.appendChild(button)

button.onclick = clickF7

document.addEventListener('keydown', function (e) {
  if(e.key === 'f7') {
    console.log('clicked f7')
  }
})

​

编辑:添加侦听器以测试keydown事件编辑:已在chrome上测试

​

​