title: How to detect when all keys are released
body: <p>The following code is supposed to measure how long a key (or more keys) was pressed.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var output = document.getElementById('output'),
      pressed = {};
  
  window.onkeydown = function(e) {
      if ( pressed[e] ) return;
      pressed[e] = e.timeStamp;
  };
  
  window.onkeyup = function(e) {
      if ( !pressed[e] ) return;   
      var duration = ( e.timeStamp - pressed[e] ) / 1000;
      var today = new Date();
      var date = today.getDate()+'-'+(today.getMonth()+1)+'-'+today.getFullYear();
      var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
      var dateTime = date+' '+time; 
      output.innerHTML += dateTime + ' - Key(s) pressed for ' + duration + ' seconds&lt;/p&gt;';
      pressed[e] = 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="output"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there any way to change the window.onkeyup function so that it makes the output log only when ALL keys are released?</p>
  <p><strong>Example:</strong></p>
  <p>10:00:00 - I press A and hold it
  <p>10:00:05 - I press B and hold it
  <p>10:00:20 - I press C and hold it
  <p>10:00:22 - I release A
  <p>10:00:24 - I release B
  <p>10:00:30 - I release C
  <p><strong>Current code output:</strong></p>
  <p>26-2-2021 10:00:22 - Key(s) pressed for 22 seconds
  <p>26-2-2021 10:00:24 - Key(s) pressed for 2 seconds
  <p>26-2-2021 10:00:30 - Key(s) pressed for 6 seconds
  <p><strong>Expected output:</strong></p>
  <p>26-2-2021 10:00:30 - Key(s) pressed for 30 seconds
  <p>Thank you for your help.</p>