浏览器中不可见元素的键盘快捷键

我想将键盘快捷键分配给我的页面上的按钮。浏览器中不可见元素的键盘快捷键

事实证明，直接在标记中进行操作会导致危险的副作用：即使按钮不可见，快捷方式也会触发单击事件。

我可以在我的前端控制器中动态设置/取消设置快捷方式，但看起来有点混乱。有没有更好的方法来做到这一点？非常感谢！

来源

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

浏览器中不可见元素的键盘快捷键

回答

相关问题