Giving focus to two elements? or let 2 or more user events happen at the same time?

Question

I'm trying to make a game that has two games. Multi-tasking if you will.

However, I'm stuck with how to let two elements have focus. The user will need to type numbers in the top right input and click enter. But at the same time the user will have to be playing a game with the red box using the arrow keys.

The input doesn't let me type in anything, so I tried things like

    else {
          event.stopPropagation();
       if ($('.mathinput').has(':focus')) {
              event.preventDefault();
          }
     }

and a bunch of other stuff, but same issue

html:

<div class="gamewrapper">
<input class="mathinput">
<div id="redbox"></div>
</div>

javascript:

$(document).ready(function(){
var $x = $('#redbox');
var t = 0; //timer for player div
var te1 = 5000; //timer for enemy divs, level 1

$('.gamewrapper').attr('tabindex', -1).focus();

$('.gamewrapper').on('keydown', function(event){
  var a = event.which;
  var b = parseInt($x.css('left'), 10);
  var c = parseInt($x.css('top'), 10);
     $x.attr('tabindex', -1).focus();
     if (a === 37 && b > 10) {      // for moving to the left
         $x.stop().animate({left: '-=20'}, t);
     }
     else if (a === 38 && c > 10) { // for moving to the top
         $x.stop().animate({top: '-=20'}, t);
     }
     else if (a === 39 && b < 580) { // for moving to the right
         $x.stop().animate({left: '+=20'}, t);
     }
     else if (a === 40 && c < 380) { // for moving to the bottom
         $x.stop().animate({top: '+=20'}, t);
     }
     else {
          event.stopPropagation();
       if ($('.mathinput').has(':focus')) {
              event.preventDefault();
          }
     }
});

function levelOne() {
    $x.css({left: '200px', top: '200px'});
    shdLevelOne();
}

function shdLevelOne() {
    for (var x = 0, y = 75; x < 4; x++, y+=75) {
        $('<div class="shd" style="top: ' + y + 'px;"' + '></div>').appendTo('.gamewrapper');
    }
  var $y = $('.shd');
    $y.on('click', function() {
        $y.animate({left: '570px'}, te1);
        $y.animate({left: '10px'}, te1);
    });
}

levelOne();
});

How can I get them both working?

EDIT: http://jsfiddle.net/LkWvH/

Answer 1

The whole POINT of focus is to be one thing. But you could have that one thing accept both types of input, and act upon it accordingly.