javascript - 添加 EmojiOne 区域后字符计数器中断

Question

我的文本区域有一个字符计数器，在我添加 EmojiOne Area 之前一直很好用.表情符号选择器现在运行良好，但我的字符计数器停止工作。出于某种原因，keyup 不再使用 ID。

这是我当前的代码:

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

或在 JSFiddle 中查看.

Answer 1

实际上，我发现您的代码有几个问题。以下是带有表情符号区域和字符数的更新后的工作代码。

/*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);
            }
        }

这是相同的 Fiddle 链接，您可以在其中查看。 Fiddle

初始加载的更新代码 Fiddle