title: Character counter breaks after adding EmojiOne Area
body: <p>I have a character counter for my textarea that was working great until I added <a href="https://github.com/mervick/emojionearea" rel="nofollow noreferrer">EmojiOne Area</a>. The emoji picker now works great, but my character counter stopped working. For some reason the <code>keyup</code> is no longer working off of the ID. </p>
  
  <p>Here is my current code:</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;textarea id="message" class="form-control" placeholder="Enter text here..."&gt;&lt;/textarea&gt; 
  &lt;label&gt;&lt;span id="chars" class="lead"&gt;140&lt;/span&gt;&lt;/label&gt; characters left
  </code></pre>
  
  <h3>JavaScript</h3>
  
  <pre><code>/*emojioneArea */
  $(document).ready(function() {
    $("#message").emojioneArea({
      pickerPosition: "bottom",
      tonesStyle: "bullet"
    });
  });
  
  /*Character Counter */
  function countChar(val) {
    var len = val.value.length;
  
    if (len &gt;= 140) {
      val.value = val.value.substring(0, 140);
      $('#stat span').text(0);
    } else {
      $('#stat span').text(140 - len);
    }
  }
  countChar($('#message').get(0));
  $('#message').keyup(function() {
    countChar(this);
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*emojioneArea */
  $(document).ready(function() {
    $("#message").emojioneArea({
      pickerPosition: "bottom",
      tonesStyle: "bullet"
    });
  });
  
  /*Character Counter */
  function countChar(val) {
    var len = val.value.length;
  
    if (len &gt;= 140) {
      val.value = val.value.substring(0, 140);
      $('#stat span').text(0);
    } else {
      $('#stat span').text(140 - len);
    }
  }
  countChar($('#message').get(0));
  $('#message').keyup(function() {
    countChar(this);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.emojionearea-editor:not(.inline) {
    min-height: 8em!important;
  }
  
  .emojionearea,
  .emojionearea.form-control {
    display: block;
    position: relative !important;
    width: 100%;
    height: auto;
    padding: 0;
    font-size: 20px;
    border: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-transition: border-color 0.15s ease-in-out, -moz-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .emojionearea .emojionearea-editor {
    display: block;
    height: auto;
    overflow: auto;
    font-size: inherit;
    color: #59A80B;
    cursor: text;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css" rel="stylesheet"&gt;
  
  &lt;textarea id="message" class="form-control" placeholder="Enter text here..."&gt;&lt;/textarea&gt;
  &lt;label&gt;&lt;span id="chars" class="lead"&gt;140&lt;/span&gt;&lt;/label&gt; characters left</code></pre>
  </div>
  </div>
  </p>
  
  <p>Or view it in a <a href="https://jsfiddle.net/Blunick/euv5Lekn/" rel="nofollow noreferrer">JSFiddle</a>.</p>