html5 onkeydown, проверьте, выбран ли элемент формы

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! 

    ...