title: How can I know if the cursor in textarea is still active?
body: <p>Here is my jsFiddle: <a href="http://jsfiddle.net/7NdHM/3/" rel="nofollow">http://jsfiddle.net/7NdHM/3/</a></p>
  
  <p>When the label is click on it shrinks the size of the text to leave space to see what is being written. Also when a user clicks outside the input region the text goes back to the original size. All of this works well. My issue is that when I click on another tab in the browser and I come back the cursor is still inside the textarea (that's good) but the label is back to normal (full size) and that is wrong.</p>
  
  <p>I assume it as something to do with the use of the onBlur event, if this is the case is there some other way to get the text to full size only when the cursor is not inside the textarea?</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="input"&gt;
      &lt;label&gt;Multiple lines and a floating label&lt;/label&gt;
      &lt;textarea rows="fit" placeholder aria-label="Multiple lines and a floating label" aria-invalid="false" fit&gt;&lt;/textarea&gt;
      &lt;div class="border-bottom"&gt;
          &lt;div class="underline"&gt;&lt;/div&gt;
          &lt;div class="underlineHighlight"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="errorContainer"&gt;
        &lt;div class="error" role="alert" aria-hidden="true"&gt;&lt;/div&gt;
        &lt;div class="errorIcon"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JS:</p>
  
  <pre><code>$$('.input').addEvent('click', function(e) {
      var target = document.id(e.target),
          input = (target.match('.input'))?target:target.getParent('.input'),
          textarea = input.getChildren('textarea')[0],
          label = input.getChildren('label')[0],
          underlineHighlight = input.getChildren('.underlineHighlight')[0];
  
      textarea.focus();
  
      //if () {
          label.addClass('animate');
          underlineHighlight.addClass('animate');
      //}
  });
  
  $$('.input textarea').addEvent('blur', function(e){
      var target = document.id(e.target),
          input = target.getParent('.input'),
          textarea = input.getChildren('textarea')[0],
          label = input.getChildren('label')[0];
  
      label.removeClass('animate');
  });
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.input {
      height: 73px;
      width: 320px;
  }
  
  .input label {
      position: absolute;
      height: 19px;
      margin-top: 24px;
      float: left;
      -webkit-transition: all 200ms linear;
      -moz-transition: all 200ms linear;
      -ms-transition: all 200ms linear;
      -o-transition: all 200ms linear;
      transition: all 200ms linear;
      -webkit-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
  }
  
  .input label.animate {
      color: #4059a9;
      -moz-transform: scale(0.7) translateY(-27px);
      -webkit-transform: scale(0.7) translateY(-27px);
      -o-transform: scale(0.7) translateY(-27px);
      -ms-transform: scale(0.7) translateY(-27px);
      transform: scale(0.7) translateY(-27px);
  }
  
  .input textarea {
      width: 320px;
      height: 19px;
      resize: none;
      -webkit-writing-mode: horizontal-tb;
      -webkit-appearance: textarea;
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      display: inline-block;
      text-align: start;
      -webkit-rtl-ordering: logical;
      -webkit-user-select: text;
      flex-direction: column;
      cursor: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      outline: none;
      border: 0 none;
      padding: 0;
      margin: 24px 0 0 0;
      font: inherit;
  }
  
  .input .border-bottom {
      top: 35px;
  }
  
  .input .underline {
      height: 1px;
      background: #757575;
      border-bottom-color: #757575;
  }
  
  .input .underlineHighlight {
      color: #4059a9;
      background: #4059a9;
      -webkit-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      -o-transition: all 300ms linear;
      transition: all 300ms linear;
  }
  
  .input .underlineHighlight.animate {
      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
      -webkit-transform: scale(1);
      background: #4059a9;
  }
  
  .input .errorContainer {
      height: 24px;
  }
  </code></pre>
  
  <p>Here is what I am trying to reproduce with CSS3, and Mootools: <a href="http://www.polymer-project.org/components/paper-elements/demo.html#paper-input" rel="nofollow">http://www.polymer-project.org/components/paper-elements/demo.html#paper-input</a> (the last input).</p>