title: How can I make copy-paste event work in a text area?
body: <p>I've created a textbox, a similar one that Twitter has when making a post, including the blue progress bar SVG circle on the bottom right corner that slowly increases, based on the number of letters you type and turns red when you go over the max amount of characters.</p>
  <p>Mine works with text so far. However, it breaks a bit when I copy-paste the text in. Here is an example of it.</p>
  <p><a href="https://i.stack.imgur.com/J5Adp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J5Adp.png" alt="enter image description here" /></a></p>
  <p>Is there any way I can make it work even when I copy-paste the text in?</p>
  <p>My code</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 orb = (function() {
      var progress = document.querySelector('.progress'),
      textarea = document.querySelector('textarea'),
      counter  = document.querySelector('.counter');
  
  
  /**
   * GRAB ELEMENTS
   */
  
  
  var tweetLength = 40,
      warningZone = Math.floor( tweetLength * (1/2) ),
      dangerZone  = Math.floor( tweetLength * (3/4) );
  
  
  /**
   * SET DASH-ARRAY/OFFSET
   */
  var pathLength = Math.PI * ( progress.getAttribute('r') * 2 );
  
  progress.style.strokeDashoffset = pathLength + 'px';
  progress.style.strokeDasharray  = pathLength + 'px';
  
  
  /**
   * ON KEYDOWN
   */
  textarea.addEventListener('keydown', function( event ) {
  
      var len = textarea.value.length,
          per = textarea.value.length / tweetLength;
  
      var handleProgress = function() {
          if ( len &lt;= tweetLength ) {
              var newOffset = pathLength - (pathLength * per) + 'px';
              progress.style.strokeDashoffset = newOffset;
          }
      }
  handleProgress();
  
      var handleColours = function() {
          progress.classList.toggle('warn', len &gt; warningZone &amp;&amp; len &lt; dangerZone);
          progress.classList.toggle('danger', len &gt;= dangerZone);
          progress.classList.toggle('tragedy', len == tweetLength);
      }
  handleColours();
  
      var handleCounter = function() {
          counter.textContent = tweetLength - len;
          counter.classList.toggle('danger', len &gt;= tweetLength);
      }
  handleCounter();
  
  });
  
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    box-sizing: border-box; }
  
  *, *:before, *:after {
    box-sizing: inherit; }
  
  body {
    color: #777;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 100%;
    background-image: url("../img/happy.png");
    background-position: 50% 12em;
    background-repeat: no-repeat;
    background-size: 85%;
    height: 100vh;
    margin: 0; }
  
  form {
    position: relative;
    margin: 0px auto;
    width: 25em; }
  
  textarea {
    color: #333;
    font-size: 0.9em;
    font-family: inherit;
    border: 2px solid #333;
    background: #fff;
    border-radius: 0.333em;
    outline: none;
    display: block;
    padding: 0.6em;
    max-width: 100%;
    width: 100%;
    height: 100px; }
  
  .counter {
    color: #777;
    font-size: 0.8125em;
    position: absolute;
    bottom: 0.625em;
    right: 0.80em; }
  
  svg {
    transform: rotate(-90deg); }
    svg circle {
      fill: none;
      stroke-width: 1; }
  
  .underlay {
    stroke: #ccc; }
  
  .progress {
    color: #1da1f2;
    stroke-width: 3;
    transition: .2s stroke-width ease-in-out; }
  
  /* colors */
  .safe {
    color: #1da1f2; }
  
  .warn {
    color: #ffad1f; }
  
  .danger {
    color: #e0245e; }
  
  .tragedy {
    stroke-width: 5;
    animation: blink .4s ease-out; }
  
  @keyframes blink {
    0% {
      stroke-width: 5; }
    10% {
      stroke-width: 10; }
    100% {
      stroke-width: 5; } }
  
  /*# sourceMappingURL=style.css.map */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Orb me, baby&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;svg height="90" width="90"&gt;
          &lt;circle class="underlay" cx="50%" cy="50%" r="26"&gt;&lt;/circle&gt;
          &lt;circle class="progress" cx="50%" cy="50%" r="26" stroke="currentColor"&gt;&lt;/circle&gt;
      &lt;/svg&gt;
  
      &lt;form&gt;
          &lt;textarea cols="10" rows="3" autofocus&gt;&lt;/textarea&gt;
          &lt;span class="counter"&gt;&lt;/span&gt;
      &lt;/form&gt;
  
      &lt;script src = "js/app.module.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>