0

我正在尝试使用按键移动图像。我已经弄清楚问题出在哪里，我只是无法解决它。问题与页面加载时的焦点有关。我使用tabindex. 在我看来，这是一个糟糕的解决方案。

代码：

$(document).ready(function(){
    $("#hero").focus();
    ("#hero").on('keydown', function(event){
        switch(event.which){
            case 37:
                $('#hero').stop().animate({
                    left: '-=10'
                }); //left arrow key
                break;
            case 38: 
                $('#hero').stop().animate({
                            top: '-=10'
                }); //up arrow key
                break;
            case 39:
                $('#hero').stop().animate({
                    left: '+=10'
                }); //right arrow key
                break;
            case 40: 
                $('#hero').stop().animate({
                    top: '+=10'
                }); //bottom arrow key
                break;
        }
    });

});

有人会认为这.focus()是要走的路，但由于某种原因，这行不通。

这是小提琴

谢谢！

4

3 回答 3

1

给 hero 一个这样的 tabindex

$("#hero").attr("tabindex",-1).focus();

演示

于 2013-09-10T10:49:32.933 回答
1

您不能在图像上使用focus，您可以做的是创建一个隐藏的输入字段并聚焦并读取该输入框中的击键。

演示： http: //jsfiddle.net/PuPZF/2/ （基于Anton的代码）

于 2013-09-10T10:53:39.970 回答
0

这是你想要的

HTML：

<div id="pane">
    <div id="box"></div>
</div>

CSS：

#pane {
    position:relative;
    width:300px; height:300px;
    border:2px solid red;
}

#box {
    position:absolute; top:140px; left:140px;
    width:20px; height:20px;          
    background-color:black;
}

JavaScript：

var pane = $('#pane'),
    box = $('#box'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return n < 0 ? 0 : n > w ? w : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newv(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
}, 20);
于 2013-09-10T10:47:15.770 回答