Le compteur de caractères se casse après l'ajout d'EmojiOne Area

Question

J'ai un compteur de caractères pour mon textarea qui fonctionnait très bien jusqu'à ce que je rajoute Zone EmojiOne . Le sélecteur d'emoji fonctionne maintenant très bien, mais mon compteur de caractères a cessé de fonctionner. Pour une raison quelconque, le keyup ne travaille plus à partir de l'identification.

Voici mon code actuel :

HTML

<textarea id="message" class="form-control" placeholder="Enter text here..."></textarea> 
<label><span id="chars" class="lead">140</span></label> characters left

JavaScript

/*emojioneArea */
$(document).ready(function() {
  $("#message").emojioneArea({
    pickerPosition: "bottom",
    tonesStyle: "bullet"
  });
});

/*Character Counter */
function countChar(val) {
  var len = val.value.length;

  if (len >= 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);
});

/*emojioneArea */
$(document).ready(function() {
  $("#message").emojioneArea({
    pickerPosition: "bottom",
    tonesStyle: "bullet"
  });
});

/*Character Counter */
function countChar(val) {
  var len = val.value.length;

  if (len >= 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);
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<link href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css" rel="stylesheet">

<textarea id="message" class="form-control" placeholder="Enter text here..."></textarea>
<label><span id="chars" class="lead">140</span></label> characters left

Ou le visualiser dans un JSFiddle .

Answer 1

J'ai trouvé plusieurs problèmes avec votre code en fait. Et voici le code mis à jour avec emojionearea et le nombre de caractères.

/*emojioneArea */
   $(document).ready(function() {
         $("#message").emojioneArea({
                       pickerPosition: "bottom",
                       tonesStyle: "bullet",
                       events: {
                         keyup: function (editor, event) {
                           console.log('event:keyup');
                           countChar(this);
                        }
                      }
               });
    }); 

   /*Character Counter */
        function countChar(val) {
            var len = val.getText().length;
            if (len >= 140) {
                  val.value = val.content.substring(0, 140);
                  $('#chars').text(0);
            } else {
                 $('#chars').text(140 - len);
            }
        }

Voici le lien Fiddle pour la même chose, où vous pouvez le vérifier. Violon

Code mis à jour avec la charge initiale Violon