Question

我正在开发一个html5画布游戏，我正在使用document.onkeydown来测试输入。但是，我想在onkeydown中添加一个检查以确保没有选择任何表单元素，尤其是聊天框。我该如何检查？

这是我的onkeydown代码

document.onkeydown = function(event) {
                var keyCode;

                if(event == null)
                {
                    keyCode = window.event.keyCode;
                }
                else
                {
                    keyCode = event.keyCode;
                }
                var message = {
                    'msgId': 4
                };

                switch(keyCode)
                {
                    // left
                    case 65:
                        message['move'] = 0;
                        connection.send(JSON.stringify(message));
                        break;

                    // up
                    case 87:
                        message['move'] = 1;
                        connection.send(JSON.stringify(message));
                        break;

                    // right
                    case 68:
                        message['move'] = 2;
                        connection.send(JSON.stringify(message));
                        break;

                    // down
                    case 83:
                        message['move'] = 3;
                        connection.send(JSON.stringify(message));
                        break;

                    default:
                    break;
                }
            }

Answer 1

通常情况下，html Canvas不会收到它自己的键盘事件。

但是如果你给画布一个tabindex，那么会收到它自己的键盘事件。

    // set canvas to be a tab stop (necessary to get keydown events)

    myCanvas.setAttribute('tabindex','0');

然后，您可以专门在画布而不是窗口上侦听关键事件。

    // have handleKeydown handle keydown events on the canvas

    myCanvas.addEventListener('keydown',handleKeydown,false);

与所有文本输入元素一样，使用必须单击画布以使其聚焦。

但是，您可以强制画布具有焦点

    // set focus to the canvas so keystrokes are immediately handled

    canvas.focus();

[添加 - 确定是否在输入元素中引发了关键事件]

如果要确定哪个元素引发了键事件，可以检查引发的事件的event.target.tagName属性。

document.onkeydown = function(event) {

    // if the key occurred in an input element...just exit 

    if(event.target.tagName=="INPUT"){ return; }

    // the keystroke wasn't in an input element, do your stuff!

    ...

html5 onkeydown，检查是否选择了表单元素

1 个答案: