通过onclick插入Unicode表情后，如何正确统计并显示文本框的字符数？

我明白你的问题啦——直接通过JS给textarea赋值表情的时候，字符计数器没反应，对吧？这是因为直接修改value属性不会自动触发input事件，而你的计数器逻辑是绑定在input事件上的，所以自然不会更新~

下面给你两种简单的解决办法，选哪种都能搞定问题：

解决方法一：手动触发input事件 #

修改你的showEmoji函数，在追加表情之后，手动触发textarea的input事件，这样计数器的代码就会自动执行了。修改后的完整代码如下：

JS代码 #

function showEmoji(elem) {
  const textarea = document.querySelector('textarea');
  textarea.value += elem.textContent;
  // 手动触发input事件，让计数器同步更新
  textarea.dispatchEvent(new Event('input'));
}


$(document).ready(function() {
  $('textarea').on("input", function() {
    var maxLength = $(this).attr("maxLength");
    var currentLength = $(this).val().length;
    var color = currentLength < 20 ? '#ff0000' : '#00BB00';
    
    $('#minChars').css({
      'color': color
    });
    
    $('#Chars').text(currentLength);
    
    if (currentLength > 480) {
      color = '#FF9900';
    }
    
    if (currentLength > 500) {
      color = '#ff0000';
    }
    
    $('#Chars').css({
      'color': color
    });
  });
});

HTML代码（无需改动） #

<span onclick="showEmoji(this)">&#129321;</span>
<textarea name="text" rows="6" minlength="20" maxlength="500" required placeholder="Text.."></textarea>
<div><b id="Chars" class="red">0</b> from min. <b id="minChars" class="red">20</b> and max. <b class="red">500</b> Characters used.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

改动说明：只在showEmoji函数最后加了一行textarea.dispatchEvent(new Event('input'));，手动模拟用户输入的input事件，让计数器逻辑自动触发，字符数就会立刻更新啦。

解决方法二：抽离计数器逻辑为独立函数 #

如果以后还会有其他JS修改textarea内容的场景，推荐把计数器逻辑单独抽成一个函数，这样不管在哪修改内容，直接调用这个函数就能更新计数器，不用管事件触发的问题。代码示例：

JS代码 #

// 把计数器逻辑抽成独立函数，方便复用
function updateCharCounter(textarea) {
  const $textarea = $(textarea);
  var currentLength = $textarea.val().length;
  var color = currentLength < 20 ? '#ff0000' : '#00BB00';
  
  $('#minChars').css({
    'color': color
  });
  
  $('#Chars').text(currentLength);
  
  if (currentLength > 480) {
    color = '#FF9900';
  }
  
  if (currentLength > 500) {
    color = '#ff0000';
  }
  
  $('#Chars').css({
    'color': color
  });
}

function showEmoji(elem) {
  const textarea = document.querySelector('textarea');
  textarea.value += elem.textContent;
  // 直接调用计数器更新函数
  updateCharCounter(textarea);
}


$(document).ready(function() {
  $('textarea').on("input", function() {
    // 用户手动输入时调用更新函数
    updateCharCounter(this);
  });
  // 页面加载时初始化一次计数器状态
  updateCharCounter($('textarea')[0]);
});

这种方式的好处：逻辑复用性更强，比如以后要做“清空文本框”“批量插入内容”这类操作，直接调用updateCharCounter就能同步更新计数器，不用重复写逻辑。

备注：内容来源于stack exchange，提问作者user27340936