Adding a character counter to the excerpt metabox

Question

We try applying an altered version of this (very popular) code in a custom-functions plugin. It was even mentioned at stackoverflow but the whole question was deleted since the user asking was removed. Here is a Google cached version. Closely modified code is still present.

This is the altered code:

// Add Character Counter to the Excerpt Meta Box
function excerpt_count_js(){
  if ('page' != get_post_type()) {

      echo '<script>jQuery(document).ready(function(){
jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:5px;right:80px;color:#666;\"><small>Excerpt length: </small><input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"excerpt_counter\" readonly=\"\" style=\"background:#fff;\"> <small>character(s). (128 Characters MAX)</small></div>");
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     jQuery("#excerpt").keyup( function() {
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     if ( jQuery("#excerpt_counter").val() >= 129 ) {
        jQuery("#excerpt_counter").css("color","red");
     } else {
        jQuery("#excerpt_counter").css("color","green");
     }
   });
});</script>';
}
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');

It works well on the excerpt meta box, producing expected results.

But it causes multiple issues on the Edit Media screen. Although it is coded to load only if ('page' != get_post_type()) and on admin_head-post.php or admin_head-post-new.php.
These issues are:

• the Help and Screen Options buttons become un-clickable.
• the Hover Effect does not work on the admin sidebar
• the Description buttons (like b+i+img etc.) just disappear.

We have tried the original as well as other modified versions of the script with no luck.

Similar questions have been asked here and here seemingly using the same jQuery coding. Still, no one has reported any issues. Is it just us?

EDIT:

Since you asked, the errors are:

Uncaught TypeError: Cannot read property 'length' of undefined
Uncaught TypeError: Cannot read property 'hasClass' of undefined

Answer 1

Ok, so I didn't like the way that was written, so i slightly rewrote it with different syntax, and more readable structure.

<?php 
// Add Character Counter to the Excerpt Meta Box
function excerpt_count_js(){
    if ('page' != get_post_type()) { ?>
        <script>

        (function($){

            $(document).ready(function(){

                if ( $('#postexcerpt').length ) {

                    var maxChar = 128;

                    $excerpt = $('#excerpt');

                    $("#postexcerpt .handlediv").after( '<div style="position:absolute;top:5px;right:80px;color:#666;">' +
                                                            '<small>Excerpt length: </small>' +
                                                            '<input type="text" value="0" maxlength="3" size="3" id="excerpt_counter" readonly="" style="background:#fff;" /> ' +
                                                            '<small>character(s). (' + maxChar + ' Characters MAX)</small>' +
                                                        '</div>'
                                                    );

                    $excerptCounter = $("#excerpt_counter");

                    $excerptCounter.val( $excerpt.val().length );

                    $excerpt.keyup( function() {

                        $excerptCounter.val( $excerpt.val().length );

                        var exColor = ( ( $excerptCounter.val() > maxChar ) ? 'red' : 'green' );

                        $excerptCounter.css( 'color', exColor );

                    });

                }

            });

         })(jQuery);

        </script>
    <?php }
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');
?>

It didn't have a check for whether or not #postexcerpt was even on the page, so I added that, and attempted to clean it up and make it easier to understand and change. I'm not a fan of the inline styling, but oh well.

Anyway, I tested this on a clean 4.6.1 install with 2016 installed, and it worked just fine. Let me know if this doesn't work for you.