Question

我正在尝试编写一个网页，让用户使用条形码扫描仪制作购买的产品清单。由于条形码扫描仪通常模拟普通的键盘输入，因此这并不是特别的。

无论如何，我发现很多人在使用条形码扫描仪时都没有看屏幕，因此常常没有意识到光标没有聚焦在条形码输入区域上。

因此，每次有键盘输入并且网页上没有关注的字段时，我会尝试触发javascript（播放声音）。

但是我被困住了： 1）即使一个接一个地按下10个键，我怎样才能使javascript只发射一次（它应该每个扫描条形码只播放一次声音，而不是每个数字）。 2）我怎样才能解决“无场聚焦”问题？有没有办法从DOM获取此信息？或者我是否必须检查页面上的每个字段是否有焦点？这将是不方便的，因为其他字段（条形码输入字段除外）的数量可能会有所不同。

感谢您的帮助。

本尼迪克特。

Answer 1

下面是一些代码，即使10个按键很快被按下，也会执行“仅一次”部分。

它使用计时器在1秒后重置计数器。如果在此秒内按下另一个按钮，则计时器重新启动，因此它不会意外地重置计数器。为了测试目的，我将阈值设置为3秒而不是10秒，您可以根据需要进行更改。

(function () {
    var counter = 0,
        timer,
        threshold = 3;


    document.addEventListener('keydown', function () {

        window.clearTimeout(timer);

        counter += 1;

        if (counter >= threshold) {
            console.log('do whatever you want');
            counter = 0;
        }

        timer = window.setTimeout(function () {
            counter = 0;
        }, 1000);

    });
})()

http://jsfiddle.net/gJC3M/2/

Answer 2

即使在另一个
之后不久按下10个键，我怎样才能使javascript仅激活一次

你无法做到这一点。

相反，在函数触发时将变量设置为true，并在X秒后使用setTimeout将其设置为false。在事件处理函数的顶部，测试该变量是否为真，如果是，则立即返回。

我怎样才能解决“无场焦点”问题？

使用绑定到document对象的事件处理程序测试event.target。

或者，将keydown事件绑定到每个输入（并确保它调用event.stopPropagation）。将“无输入焦点”代码绑定到document对象上的keydown。

如果没有焦点，则在键盘输入处激活javascript

2 个答案: