無法在非事件元素上執行按鍵事件

我試圖創建一個模態組件，並希望對其進行設置，以便在用戶點擊轉義時模式關閉。不過，我似乎無法獲得組件工作的按鍵綁定。無法在非事件元素上執行按鍵事件

，我開始試圖通過一個主機綁定：

@HostListener('keypress', ['$event']) public escapePressed(key) { 
    console.log(key); 
}

，但我從來沒有看到任何東西，除非登錄我在我的組件的輸入是。我將聽衆更改爲window:keypress，我開始看到記錄的事件，也許我可以將其設置爲只在模式打開時纔會觸發，但我認爲我仍應該嘗試弄清楚如何正確執行。另外，如果創建了多個模式，那麼會有多個窗口綁定，都會執行相同的操作，效率不高。

我不知道如何解決這個問題。

來源

2017-10-21 RhoVisions

這裏的問題是重點。你的組件沒有集中。所以這個問題的解決方法將在模板內創建一個div，並使其可以專注。

<div id="rootdiv" tabindex="0" (keypress)="dosomething($event)" > 
    <!-- other elements here --> 
</div>

和組件內

dosomething(e){ 
    if(e.keyCode == 27){ 
     //do something 
    } 
}

檢查這個香草js的例子

 <script> 
      function doit(e){ 
       console.log("called") 
      } 
     </script> 
     <div id="container" tabindex="0" onkeypress="doit(e)"> 
      <input type="text" > 
     </div> 
     <style> 
      *{ 
       margin:0; 
      } 
      #container{ 
       display: flex; 
       height: 100vh; 
       width: 100vw; 
      } 

     </style> 
     <script> 
      var div = document.getElementById('container') 
      div.focus() 
     </script>

來源

2017-10-21 02:31:40 crook

我有一種感覺，它與重點做的，但我不知道如何正確地集中它。但是，如果焦點轉移到輸入，例如，它會停止工作，對吧？你的回答讓我想知道，當窗口綁定+只有當模式打開時觸發是最好的方式，但不知道如何避免多重綁定。 – RhoVisions

只要你的輸入在div標籤內你是安全的。 – crook

但用tabindex，用戶是不是必須先點擊div？我只是試了一下，我不得不自己關注這個div，以獲得觸發的鑰匙。如果用戶必須點擊某個東西，他們只需點擊我的關閉框即可。感謝您的信息，但我不認爲它是我正在尋找的解決方案。 – RhoVisions

無法在非事件元素上執行按鍵事件

回答

相關問題