如何使用鍵盤控件創建切換按鈕？

我有一個簡單的信息按鈕。單擊此按鈕時，將打開一個信息文本框，當您再次單擊該按鈕時，該信息框會消失或「切換」。如何使用鍵盤控件創建切換按鈕？

我想要使用鍵盤替代具有相同的行爲。到目前爲止，信息按鈕再次打開信息文本框，當我點擊「輸入」鍵時。但是，當我再次點擊輸入鍵時，信息框不會切換，它仍然顯示。

當前代碼：

//HTML 
    <h2 class="tile-header">CCIR</h2> 
     <span> 
      <img 
      role="button" 
      id="cis-info-button" 
      aria-labeledby="Information for ccir Summary" 
       ng-click="vm.showHelp()" 
       ng-keydown="vm.keyHelp ($event)" 
      class="info-icon" 
      ng-src="{{infosrc_ccir}}" 
      alt="ccir Summary Information" 
      width="10" height="10"> 
     </span>  

//JS 

    function showHelp() 
    { 
     var helpConfig = 
      { 
       animation: true, 
       templateUrl: 'scripts/tiles/ccirSummary/views/ccirSummaryInfo.html', 
       size: 'ccir-summary-help' 
      }; 
     $modal.open(helpConfig); 
    } 

    function keyHelp(e) 
    { 
     if (e.keyCode === 13 || e.charCode === 32) 
     { 
      showHelp(); 
     } 
    }

來源

2016-07-06 Kode_12

你有一個URL可以看到這個動作嗎？ – aardrian

這應該工作。

$(document).ready(function() { 
    $(document).bind('keydown',function(e){ 
     if(e.keyCode === 13 || e.charCode === 32) { 
      showHelp(); 
     } 
    }); 
});

來源

2016-07-06 15:32:23 NTL

，不幸的是，看起來像我以前，只是在jQuery –

相同的代碼差異在於它被綁定到文檔而不是圖像。認爲這可能是你的問題。 – NTL

沒有一個URL來測試它，我建議兩件事嘗試：

我這裏看不到任何東西，你將焦點移動到您的按鈕。沒有得到重點，按鈕不會被解僱。這意味着您必須聽取整個文檔的按鍵。
使用<button>而不是<image role=button>，因爲role不支持鍵盤支持（必須全部編寫腳本）。

模態的大多數問題（如你所描述的）歸結爲鍵盤焦點。從另一個顯示焦點管理的東西我有一個modal example pen。當你激活模式時，你會看到你可以按下Enter鍵來打開，關閉，打開，關閉等等。只有管理重點纔有可能。

來源

2016-07-06 16:31:57 aardrian

使用tab鍵自然將焦點帶到按鈕。 2. ng-keydown給了它鍵盤支持，因爲它在按下空格/回車鍵時觸發模式 –

如果您想讓用戶按Enter鍵打開，然後按Enter鍵關閉（其間無其他動作），那麼您或者需要一個關閉模式（'$ modal.close（helpConfig）;'）的函數或另一個執行這個工作的按鈕。此外，ng-keydown是使用正確元素的糟糕代理（即'

不幸的是，我只限於我可以分享的東西，所以這是一個令人沮喪的小問題 –

如何使用鍵盤控件創建切換按鈕？

回答

相關問題