把重点放在两个要素上？或者让2个或更多用户事件同时发生？

Question

我正在尝试制作一款有两款游戏的游戏。如果你愿意，可以进行多任务处理。

然而，我仍然坚持如何让两个元素具有焦点。用户需要在右上角的输入中键入数字，然后单击Enter。但与此同时，用户必须使用箭头键在红色框中玩游戏。

输入不允许我输入任何内容，所以我尝试过像

这样的内容

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

和其他一些东西，但同样的问题

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();
});

我怎样才能让他们都工作？

编辑：http://jsfiddle.net/LkWvH/

Answer 1

整个焦点都是一回事。但是你可以让一件事接受这两种输入，并据此采取行动。