3

ページのボタンにキーボード ショートカットを割り当てたいと考えています。

マークアップでそのまま実行すると、危険な副作用が発生することが判明しました。ボタンが非表示の場合でも、ショートカットによってクリック イベントが発生します。

フロントエンドコントローラーでショートカットを動的に設定/設定解除することに頼ることができますが、少し面倒です。それを行うよりエレガントな方法はありますか？どうもありがとう！

4

2 に答える 2

2

あなたはこのようなことができるはずです

var shortcuts = {
    49: document.getElementById("button"), //character "1"
    50: document.getElementById("button2") //character "2"
};

var isVisible = function(el) {
    return !(el.style.display === "none" || el.style.visibility === "hidden");
};

var bindEvent = function(el, event, handler) {
  if (el.addEventListener){
    el.addEventListener(event, handler, false); 
  } else if (el.attachEvent){
    el.attachEvent('on'+event, handler);
  }
};

bindEvent(window, "keydown", function(e) {
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    if(typeof shortcuts[charCode] !== "undefined" && shortcuts[charCode] && isVisible(shortcuts[charCode])) {
        shortcuts[charCode].click();
    }
});

http://jsfiddle.net/Z2baQ/

于 2012-12-29T20:23:06.903 に答える
0

私は以下に示すようにやり遂げました。これはまさに私が望んでいたことです。非表示のボタンのショートカットは機能しませんが、表示されているボタンのショートカットは機能します。

<head>

    $(document).ready(function () {
         var self = 'document_ready';
         assignListeners();
     });

    var assignListeners = function() {
        $('#btn1').on('click', function(){
            if ($(this).css('display') != 'none')
                realListener1();
        });
        $('#btn2').on('click', function() {
            if ($(this).css('display') != 'none') {
                realListener2();
            }
        });
    };


    var realListener1 = function() {
        alert('Button 1 clicked')
    };
    var realListener2 = function() {
        alert('Button 2 clicked')
    };


</head>
<body style="margin:0; padding:0;">
<div>
<button id="btn1" accesskey="Z" style="display: none;">Button 1</button>
<button id="btn2" accesskey="X" >Button 2</button>
</div>

</body>
于 2012-12-30T02:32:31.280 に答える