无法在非事件元素上执行按键事件

我试图创建一个模态组件，并希望对其进行设置，以便在用户点击转义时模式关闭。不过，我似乎无法获得组件工作的按键绑定。无法在非事件元素上执行按键事件

，我开始试图通过一个主机绑定：

@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

无法在非事件元素上执行按键事件

回答

相关问题