使用键盘按钮提交网页？ [复制]

Posted 2023-02-22

【中文标题】使用键盘按钮提交网页？ [复制]

【英文标题】：Submitting web using keyboard buttons? [duplicate]

【发布时间】：2013-06-18 22:31:00

【问题描述】：

我的简单 html 网页上有几个按钮调用了一些 javascript：

  <input type="image" src="button_start.png" onClick="start();">
  <input type="image" src="button_stop.png" onClick="stop();">
  <input type="image" src="button_reset.png" onClick="reset()">

我想要的是能够按下三个单独的键盘键，然后让它们“按下”按钮或调用 javascript 代码。最简单的方法是什么？

【问题讨论】：

谢谢尼罗河。我搜索了，但显然不够好。我最终在这里修改了 op 的代码：***.com/a/4929676/2509899，效果很好。

【参考方案1】：

您可以监听 keydown 事件，并且可以使用 keycode 来识别按下哪个键来执行功能。见https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

【参考方案2】：

您可以添加按键监听器，并根据按下的按键调用相应的函数。

然而，由于安全原因，实际调度/模拟按钮点击事件非常困难。

下面是一个使用 javascript 的示例，当按下 keycode 13 的键时将调用 start()。

您可以在此处查看代码：http://www.quirksmode.org/js/keys.html

使用 Javascript

window.addEventListener('keypress', function (e) 
    if (e.keyCode !== 13) 
        start();
    
, false);

【讨论】：

你为什么要推荐 jQuery...？

你说得对，这有点矫枉过正。

【参考方案3】：

使用快捷键 jquery 插件ShortKey Plugin

$(document).shortkeys(
  's': function ()  start(); ,'o': function ()  stop(); ,'r': function ()  reset(); 
);

【讨论】：

-1，未调用的jQuery使用

@Nile 我不明白怎么了？

你正在使用 jQ 但 OP 没有要求它

【参考方案4】：

你可以试试这个

window.addEventListener('load', function(e)
    var keys =  't' : 'start', 's' : 'stop', 'r' : 'reset' ;
    window.addEventListener('keypress', function (e)
        var fn = String.fromCharCode(e.which||e.keyCode);
        if(fn in keys) window[keys[fn]]();
    );
);

按t 开始，s 停止，r 重置。此外，您可以更改键，如果您想为start 功能设置s 键，则相应地更改keys 对象中的键，但一个键应该用于一个功能。

DEMO.