title: Detect when the cursor is no longer in the textarea with JavaScript
body: <p>What I want to do is an HTML file which detects if the textArea has something written or not. To show it, I change the background color, so grey color is used when the textArea is empty and white when it has something written on it.</p>
  
  <p>With this end, I developed this 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>function prueba() {
      if (document.getElementById("text_1_3").value != "") {
          document.getElementById("text_1_3").style.background = "white";
      } else {
          document.getElementById("text_1_3").style.background = "rgb(174,170,170)";
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Text Area: &lt;textarea id="text_1_3" style="background-color:rgb(174,170,170)" onclick="prueba();"&gt;&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The main problem I have with this code is that to update the background-color, I always have to click on the textArea. And what I would like is that when I finished typing whatever in the textArea and I click on any part of the page (even if there is not a reference, button..., lets say in "plain text"), the background color is updated.</p>