0

ここでこの回答を読みましたフォーカス可能な要素で矢印キーナビゲーションを書くためのガイド? しかし、私のような初心者が理解できるほど詳しくはありません。

そのような行に何かが必要です。DOM に div を持つ 4x4 グリッドがあります。セレクターを移動してから、フォーカスのある div を Enter で選択できるようにしたい。

編集：いくつかのコードを貼り付け、

これは、私が完全に間違った方向に進んでいることに気付いたときに試していたことです。

function arrowKeys(input){
    var keyCode = input.keyCode;
    var border = document.getElementById(keyid);
    var removeBorder = border.removeAttribute("style");

    if(keyCode == 38 || keyCode == 39 || keyCode == 40 || keyCode == 37){
        var addborder = border.setAttribute("style", "border:2px solid red");
        border.addborder;
        if(keyCode == 38){
            removeBorder;
            keyid = keyid - 4;
            border.addborder;
            console.log(keyid + " upp");
        }
        if (keyCode == 39){
            removeBorder;
            keyid++;
            border.addborder;
            console.log(keyid + " right");
        }
        if(keyCode == 40){      // right arrowkey
            removeBorder;   
            keyid = keyid + 4;
            border.addborder;
            console.log(keyid + " down");
        }
        if (keyCode == 37){     // left arrowkey
            removeBorder;
            keyid--;
            border.addborder;
            console.log(keyid + " left");
        }
    }
}

このような行で配列を使用する必要があると考えました。

var navigationMap = [[1,2,3,4][5,6,7,8][9,10,11,12][13,14,15,16]];

しかし、私はこれまでに何が立ち往生しています..

4

2 に答える 2

1

プレーンな JavaScript を使用してこれを行う方法を次に示します。コードの最初の部分は、イベント ハンドラーを追加し、クラスを追加/削除するクロス ブラウザー関数です。スタイルを直接追加/削除するのではなく、アクティブなアイテムを表示するためにクラスを追加/削除していることに気付くでしょう。これにより、一般的に良い考えである JavaScript ではなく、CSS にスタイルが配置されます。

実際のデモ: http://jsfiddle.net/jfriend00/yMMxX/

(function() {
    // refined add event cross browser
    function addEvent(elem, event, fn) {
        if (typeof elem === "string") {
            elem = document.getElementById(elem);
        }

        // avoid memory overhead of new anonymous functions for every event handler that's installed
        // by using local functions
        function listenHandler(e) {
            var ret = fn.apply(this, arguments);
            if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
            }
            return(ret);
        }

        function attachHandler() {
            // set the this pointer same as addEventListener when fn is called
            // and make sure the event is passed to the fn also so that works the same too
            var ret = fn.call(elem, window.event);   
            if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }
            return(ret);
        }

        if (elem.addEventListener) {
            elem.addEventListener(event, listenHandler, false);
        } else {
            elem.attachEvent("on" + event, attachHandler);
        }
    }



    function addClass(elem, cls) {
        var oldCls = elem.className;
        if (oldCls) {
            oldCls += " ";
        }
        elem.className = oldCls + cls;
    }

    function removeClass(elem, cls) {
        var str = " " + elem.className + " ";
        elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
    }


    function findItem(items, target) {
        for (var i = 0; i < items.length; i++) {
            if (items[i] === target) {
                return(i);
            }
        }
        return(-1);
    }

    var keys = {up: 38, down: 40, left: 37, right: 39};
    var cards = document.getElementById("game-board").getElementsByClassName("card");
    addEvent(document, "keydown", function(e) { 
        // get key press in cross browser way
        var code = e.which || e.keyCode;
        // number of items across
        var width = 4;
        var increment, index, newIndex, active;

        switch(code) {
            case keys.up:
                increment = -width;
                break;
            case keys.down:
                increment = width;
                break;
            case keys.left:
                increment = -1;
                break;
            case keys.right:
                increment = 1;
                break;
            default:
                increment = 0;
                break;
        }
        if (increment !== 0) {
            active = document.getElementById("game-board").getElementsByClassName("active")[0];
            index = findItem(cards, active);
            newIndex = index + increment;
            if (newIndex >= 0 && newIndex < cards.length) {
                removeClass(active, "active");
                addClass(cards[newIndex], "active");
            }
            // prevent default handling of up, down, left, right keys
            return false;
        }
    });
})();
于 2013-03-28T04:12:46.120 に答える
0

私はjQueryでこれを行いました。次のような方法でイベントに接続できます。

  $(".some-css-class-on-your-divs").keydown(function (e)
  {
    HandleKeyDown(e, $(this));
  })

次に、別の JavaScript メソッドでイベントを処理します

function HandleKeyDown(event, jqNode)
{
  event = event || window.event;
  var charCode = event.charCode || event.keyCode;


  if (charCode == 40)
  { // down arrow key
      ///  do your thing here
  }
   // charcode 38 is up, and so on
}
于 2013-03-27T23:18:52.737 に答える