添加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和字符数更新的工作代码。

/*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更新了代码