Cacher is the code snippet organizer for pro developers

/**
 * 管理画面input文字数カウント
 * 
 */ 
function text_counter() {
?>
<script type="text/javascript">
  jQuery(
    function($) {
      /**
       * カウントアップ処理
       * @param $targetInput
       * @param $targetCounter
       * @param maxCount
       */
      function updateTitleCounter($targetInput, $targetCounter, maxCount = 0) {
        var titleLength = $targetInput.val().length;
        $targetCounter.text(titleLength);
        if (maxCount != 0 && titleLength > maxCount) {
          $targetCounter.addClass('admin-counter-over');
        } else {
          $targetCounter.removeClass('admin-counter-over');
        }
      }

      // 記事詳細タイトル文字数カウント
      var $titleWrap = $('#titlewrap');
      var $title = $('#title');
      $titleWrap.append('<div class="admin-counter-wrap">文字数: <span id="js-title-counter">0</span></div>');
      var $titleCounter = $('#js-title-counter');
      $title.on('keyup', function(){updateTitleCounter($title, $titleCounter)});
      updateTitleCounter($title, $titleCounter);

      // ACF カスタムフィールド『一覧表示タイトル』の文字数カウント
      var $acfHogeFieldName = $('.acf-field[data-name="hoge-field-name"]');
      var $acfHogeFieldNameInput = $acfHogeFieldName.find('input');
      $acfHogeFieldName.find('.acf-input').append('<div class="admin-counter-wrap">文字数: <span id="js-acf-hoge-field-name-counter">0</span></div>');
      var $acfAssistTitleCounter = $('#js-acf-hoge-field-name-counter');
      $acfHogeFieldNameInput.on('keyup', function(){updateTitleCounter($acfHogeFieldNameInput, $acfAssistTitleCounter)});
      updateTitleCounter($acfHogeFieldNameInput, $acfAssistTitleCounter)
    }
  );
</script>
<style>
  .admin-counter-wrap {
    padding: 2px 10px 5px 0;
  }
  .admin-counter-over {
    color: #FF2728;
  }
</style>
<?php
}
add_action( 'admin_head-post.php', 'text_counter' );
add_action( 'admin_head-post-new.php', 'text_counter' );