瀏覽器中不可見元素的鍵盤快捷鍵

我想將鍵盤快捷鍵分配給我的頁面上的按鈕。瀏覽器中不可見元素的鍵盤快捷鍵

事實證明，直接在標記中進行操作會導致危險的副作用：即使按鈕不可見，快捷方式也會觸發單擊事件。

我可以在我的前端控制器中動態設置/取消設置快捷方式，但看起來有點混亂。有沒有更好的方法來做到這一點？非常感謝！

來源

2012-12-29 Alex

請顯示您的樣本。 –

我會堅持取消快捷方式。 –

@LeeTaylor ... 當頁面加載，按 + M激活警報窗口。 – Alex

你應該能夠做這樣的事

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-29 20:23:06 jeremy

Didnt知道可以將數字值添加爲對象屬性鍵。謝謝 – asgoth

如果你喜歡，你可以使用數組。此外，您可以通過按複選標記 – jeremy

將其選爲接受的答案。這不是我的問題:) – asgoth

我終於實現了，如下圖所示，這不正是我想要的東西：快捷隱藏按鈕不起作用，但一個可見的人做的。

<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-30 02:32:31 Alex

瀏覽器中不可見元素的鍵盤快捷鍵

回答

相關問題